Interactive Coding 1
APPL50229 - 6 UNITS - DAN
General Links
- Course Description - HTML
- Basics Test - [10%] (Week 4) HTML
- Assignment - [20%] (Due week 7) HTML
- Build Test - [10%] (Week 10) HTML
- Group Project [30%] - (Due week 13) HTML
- Personal Project [30%] - (Due week 14) HTML
- Dan Zen E-mail - E-mail Address
- Dan Zen Museum - 1995 to 2015
- ZIM - Code Creativity
- ZIM Forum - Discussion and Help for ZIM
- ZIM Discord - Discussion and Help for ZIM
Lesson Links
Lessons
Module 1 - Interactive Media Theory (Week 1)
Lesson 1 - Interactive Media Theory
-
DOCUMENTS
- Lesson Plan - Word doc
- Program Breakdown - INFO PAGE
- Interactive Media Overview - INFO PAGE
- Creator == Ideator + Designer + Developer + Maker - jpg
- DOM and Canvas Comparison - ppt
- Canvas Uses :: Generative Art - site
- Canvas Uses :: Games - site
- Canvas Uses :: E-learning - site
- Canvas Uses :: UI/UX - site
- Canvas Uses :: Data Visualizations - site
- Canvas Uses :: Interactive Ads - site
- Canvas Uses :: Interactive Logos - site
- Canvas Uses :: Puzzles - site
- Canvas Uses :: InfoActives - site
- Canvas Uses :: Holiday Cards - site
- When to Use a JavaScript Canvas Library or Framework - Medium
- Visual Differences - zim
- ZIM About - site
- ZIM Examples - site
- Interactive Media Context - jpg
- Interactive Media Content - jpg
- Homework Instructions - HTML
INTERACTIVE MEDIA USES
INTERACTIVE MEDIA REFERENCE
HOMEWORK
Module 2 - Canvas Coding (Weeks 1, 2)
Lesson 2 - Introduction to Canvas Coding
-
DOCUMENTS
- Lesson Plan - Word doc
- Canvas Introduction - INFO PAGE
- Sample Code for Shapes - CODE PAGE
- Creative Coding - JavaScript with Creative Coding
- Set-up and Display Objects - JavaScript with Creative Coding
- Student Intro - Skool
- Display Objects - Skool
- ZIM Intro - site
- ZIM Editor - Start - editor
- ZIM Highlight Reel (2021)
- ZIM Cat Teaser (2020)
- ZIM Highlight Reel (2020)
- ZIM Highlight Reel (2017)
- ZIM 014 Site Introduction (2023)
- ZIM Docs (2023)
- Why ZIM? (Video for DOM and Canvas from Lesson 01) - optional
- ZIM at DevTO (2018) - optional / historical
- ZIM at FITC Mixer (2017) - optional / historical
- ZIM at CreateInTO 2 (2016) - optional / historical
- ZIM at CreateInTO (2015) - optional / historical
- Code in Five Minutes with ZIM - short examples
- ZIM Basics - basics of ZIM
- ZIM Bubbling - new features at ZIM
- ZIM Explore - having fun with ZIM
- ZIM Capture - code tutorials and demonstrations
- What iZ? - code definitions
- ZIM Examples - demonstrations of ZIM examples
- Code Zero - slow philosophical approach
- Variables and Concatenation - PowerPoint
- JavaScript 6 (ES6) Variables - PowerPoint
- Array and Object Literals - PowerPoint
- Functions and Function Literals - PowerPoint
- Classes, Properties and Methods - PowerPoint
- Parameters and Configuration Objects - PowerPoint
- ZIM Site - code creativity!
- ZIM Docs - functions and classes with expandable details
- ZIM Code - template, tools, libraries, tips
- ZIM Learn - tutorials (What iZ?, Capture, Bits), workshops
- ZIM About - features, applications, philosophy
- ZIM Examples - dozens of apps
- ZIM Editor - code ZIM in the Browser and see many Zapps!
- ZIM Intro - an introduction example
- ZIM Map - a site map of ZIM links
- ZIM Bits - 64 code tuturials for common interactivity
- ZIM Skool - lessons with practice editor
- ZIM Kids - coding with magic spells
- ZIM Tips - latest techniques in ZIM
- ZIM Dev - a mini-site for devs
- ZIM NFT - make and collect NFTs
- ZIM Beam - code sharing tool
- ZIM Topic on CodePen - Front-end Community
- ZIM on CodePen - Front-end Community
- Dan Zen on CodePen - Front-end Community
- Dr Abstract on Medium - Publications
- Your Guide to Coding Creativity on the Canvas - Medium
- CreateJS - Offsite
- CreateJS - EaselJS - Offsite
- CreateJS - TweenJS - Offsite
- CreateJS - SoundJS - Offsite
- CreateJS - PreloadJS - Offsite
- CreateJS Talk at Adobe - YouTube
- JavaScript - Offsite
- JavaScript Guide - Offsite
- Object Oriented JavaScript - (no custom objects yet) Offsite
- JavaScript Reference - Offsite
- Homework Instructions - HTML
INTRO REFERENCES
VIDEOS - YouTube
PLAYLISTS - YouTube
PROGRAMMING BASICS
ZIM REFERENCE
CREATE JS REFERENCE
MOZILLA REFERENCE
HOMEWORK
Lesson 3 - Components and Events
-
DOCUMENTS
- Lesson Plan - Word doc
- Example Button Component - CODE PAGE
- Functions and Events - Skool
- Components and Images - Basics
- Components and Configuration Objects - Creative Coding
- Events - Creative Coding
- Object Literals - Code Zero - optional
- Keyboard - Bubbling - optional
- Pulldown - Bubbling - optional
- Organizer and Panel - Bubbling - optional
- Accordion and Tip - Bubbling - optional
- Components Example - Demo
- Dials and Indicators - Bits
- Gradient and Gloss - Bits
- Scrollbar using Slider - Bits
- Popup Window using Pane - Bits
- Swipe Scroll Window - Bits
- Labels, Buttons, Radio Buttons, CheckBoxes - Bits
- List - Explore
- Accordion - Demo
- Pulldown - Demo
- List CheckBox - Demo
- Carousel - Demo
- Marquee - Demo
- Tabs - Demo
- Tabs - Bits
- Pad - Bits
- Color Picker - Demo
- Incon Buttons and Toggle Buttons - Bits
- Build Module - Demo
- Events and Event Handlers - PowerPoint
- JavaScript 6 (ES6) Arrow Function - PowerPoint
VIDEOS
COMPONENT EXAMPLES
PROGRAMMING BASICS
Module 3 - Logic and Flow (Weeks 2, 3)
Lesson 4 - Logic Structures
-
DOCUMENTS
- Lesson Plan - Word doc
- Conditionals and Debugging - Skool
- Interaction & Motion - CODE PAGE
- Dragging and Dragging Copies - Bits
- Snapping Multiple Objects - Bits
- Hit Tests - Are Objects Hitting - Bits
- Conditionals - Creative Coding
- What iZ a Conditional? - iZ?
- What iZ a Ternary Operator? - iZ?
- Conditionals - PowerPoint
- Ternary Operator - PowerPoint
- Homework Instructions - IMPORTANT HTML
EXAMPLES
VIDEOS
PROGRAMMING BASICS
HOMEWORK
Lesson 5, 6 - Efficiencies
-
DOCUMENTS
- Lesson Plan - Word doc
- Abstraction - Skool
- Arrays and Loops - Skool
- Hit Tests - Tips
- Crypto Files - ZIP
- Crypto Sounds - ZIP
- Loop & Ticker - CODE PAGE
- Falling, Catching & Dodging - Bits
- Tiles & Pads - Bits
- Game - (old)
- Abstraction - Creative Coding
- Abstraction 2 - Creative Coding
- Arrays - Creative Coding
- Array Methods - Creative Coding
- Loops - Creative Coding
- ZIM Loops - Creative Coding
- Hit Tests - Creative Coding
- Debugging - Creative Coding (older)
- What iZ a Loop? - iZ?
- What iZ a ZIM Loop? - iZ?
- Building with Loops - Capture
- Tickers, Containers and HitTests - Capture
- Animation Callback - Capture
- Events on a Container - Capture
- What iZ Debugging? - iZ?
- Loops - PowerPoint
- Timeouts and Intervals - PowerPoint
- Debugging Techniques - PowerPoint
- Homework Instructions - IMPORTANT HTML
EFFICIENCY EXAMPLES
VIDEOS
PROGRAMMING BASICS
HOMEWORK
Module 4 - Creativity and Planning (Week 4)
Lesson 7 - Creativity Framework
-
DOCUMENTS
- Lesson Plan - Word doc
- Creativity Framework - Offsite
- Ideas (Time, Relax, Fix, Remember, Stretch) - Powerpoint
- Exercise 1 - Hierarchy Description - Creativity Framework (CF)
- Exercise 2 - Forms of Organization - CF
- Exercise 3 - Composition and Classification - CF
- Exercise 4 - Flexibility of Hierarchy - CF
- Exercise 5 - Creating Hierarchies - CF
- Exercise 6 - Analysis, Classification and Alternatives - CF
- Exercise 7 - Parts, Purpose and Performance - CF
- Exercise 8 - Combinations with Analysis and Synthesis - CF
- Creativity Guide - Medium
- Creativity Tour - Dan Zen Museum
- Creativity Exhibit - Dan Zen Expo
- Dan Zen TEDx Talk - YouTube (unlisted)
- Homework Instructions - IMPORTANT HTML
CREATIVITY EXERCISES
CREATIVITY REFERENCES
HOMEWORK
Lesson 8 - Sketches and Plans
-
TEST - THEORY, CANVAS & PROGRAMMING BASICS
- Lesson Plan - Word doc
- Wireframes - Word doc
- Development Cycle - Powerpoint
- Building Steps - Word doc
- Droner Wireframe - jpg
- Museum Wireframe - jpg
- Tree Wireframe - jpg
- TimeVault Wireframe - jpg
- Nanora Wireframe - jpg
- Nanora - Build Steps - HTML (old)
DOCUMENTS
SKETCH EXAMPLES
BUILD EXAMPLES
Module 5 - Build Techniques (Weeks 5, 6, 7, 8, 9, 10)
-
DOCUMENTS
- Building - Skool
- Controls - Skool
- Damping, Proportion, Tiling, Parallax, Dynamic Drawing, SpriteSheets, Adobe Animate, Snapping, Progress Bars, etc.
- Building - Creative Coding
- Code in Five Minutes with ZIM - short examples
- ZIM Explore - having fun with ZIM
- ZIM Examples - Offsite
- ZIM - Interactive Animation - Offsite
- Butterfly - MotionController - Offsite
- SpriteSheets Assets - Zip
- Serps & Subs Assets - Zip [NEW]
- Serps & Subs - HTML Game [NEW]
- Space Guy Sprite Sheet with Scrollers, Dynamo, Accelerator - Demo
- Walking - basic - Demo
- Skateboard - Sprite run series - Demo
- Butterfly - with MotionController - Demo
- ZOO - Monkey SpriteSheet - with transform - Demo
- Teach - Embedded SpriteSheet - Demo
- Teach - Simple - Demo
- Jellies - Interactive Embedded - Demo
- AMBOY - Font
- Build Practice - with answers - ZIP [NEW]
- Midterm Build Test Practice - ISLAND COLLAGE - ZIP
- OLD Midterm Build Test Practice - Book/Squiggle/Peanut - ZIP
- OLD Practice JavaScript, Canvas, Components - ZIP
- Also know other display objects, methods, controls, sounds, fonts
VIDEOS
EXAMPLES
Module 6 - Project Lab (Weeks 11, 12, 13, 14)
- Open Lab to work on Group and Personal Projects with Teacher help
