🤖 AI & Machine Learning
Computer Science 30
A project-based introduction to creative coding with JavaScript and p5.js. Students progress from core JavaScript and p5...
5
Remixes
809
Views
Sections
1. Orientation and Setup22 views
Get set up with tools, workflows, and habits for creative coding with JavaScript and p5.js.
15 topics (16 versions)
1.1Course overview and expectations
2
4
1.2Creative coding mindset
11
1.3Installing VS Code and extensions
2
1.4p5.js web editor vs local setup
3
1.5Local development server
1.6Project folder structure
1.7Using Git and GitHub basics
1.8Command line essentials
1.9Browser DevTools for JS and canvas
1.10Console logging and debugging
1.11p5.js starter template
1.12Running and stopping sketches
1.13Managing assets folders
1.14Saving and sharing sketches
1
1.15Troubleshooting common setup issues
1
2. JavaScript Fundamentals49 views
Build a solid JS foundation: syntax, data types, control flow, functions, arrays, and objects.
15 topics (19 versions)
2.1Values and data types
27
2.2Variables with let and const
2
8
2.3Operators and expressions
9
2.4Control flow if else switch
2.5Loops for while for...of
1
2.6Functions and return values
2.7Arrays and array methods
2.8Objects and object literals
2.9Strings and template literals
1
2.10Numbers and Math utilities
2.11Type coercion and equality
1
2.12Truthy and falsy
2.13Error handling try catch
1
2.14Callback and Promise basics
2.15DOM and events primer
1
3. p5.js Foundations18 views
Learn the p5.js runtime, canvas lifecycle, coordinate systems, transforms, and drawing basics.
15 topics (15 versions)
3.1setup() and draw() lifecycle
3
3.2Creating the canvas
1
3.3Coordinate systems and units
2
3.4Pixel density and retina displays
1
3.5frameRate and time
1
3.6background stroke fill
1
3.7Drawing order and painter's algorithm
2
3.8Transformations translate
1
3.9Transformations rotate and scale
1
3.10push() and pop() state stacks
3.11Random vs noise
1
3.12Mapping values with map()
1
3.13Constraining values with constrain()
1
3.14Images and color pixels overview
1
3.15Debugging p5-specific issues
1
4. Shapes and Color14 views
Explore 2D primitives, curves, typography, and color theory to craft compelling visuals.
15 topics (15 versions)
4.1Points lines and triangles
4
4.2Rectangles rounded rectangles
1
4.3Ellipses arcs and pies
1
4.4Polygons with beginShape endShape
1
4.5Curves bezier and spline
1
4.6Stroke weight caps and joins
1
4.7Fill patterns and hatching
4.8Color models RGB and HSB
1
4.9Alpha transparency and blending
4.10Gradients and lerpColor()
1
4.11Dithering and palette design
1
4.12Tiling patterns and grids
1
4.13Text drawing and fonts
4.14Image tinting and masking
4.15Composition balance and hierarchy
1
5. Interaction and Animation8 views
Make sketches interactive and alive with input handling, state, motion, and particle techniques.
15 topics (15 versions)
5.1Mouse input events
4
5.2Keyboard input events
5.3Touch and mobile gestures
5.4Mapping input to parameters
1
5.5State variables and modes
5.6Time based animation with deltaTime
1
5.7Velocity acceleration and forces
5.8Easing tweening and interpolation
1
5.9Collision detection circle AABB
5.10Simple physics with gravity
5.11Particle systems introduction
5.12UI controls sliders and buttons
5.13Randomness vs determinism
5.14Scene management and transitions
5.15Saving exports screenshots and GIFs
1
6. Sound and Audio7 views
Add sound using p5.sound: synthesis, sampling, analysis, and audio-reactive visuals.
15 topics (15 versions)
6.1Digital audio fundamentals
2
6.2Setting up p5.sound
6.3Loading and playing samples
6.4Oscillators sine square saw
6.5Noise generators and sources
1
6.6Envelopes and ADSR
1
6.7Filters EQ and effects
1
6.8Amplitude and frequency analysis
1
6.9FFT spectrum and waveform
6.10Microphone input and monitoring
6.11Beat onset and tempo detection
6.12Audio reactive visuals
6.13Scheduling and timing
1
6.14Mixing routing and gain staging
6.15Recording and exporting audio
7. Functions, Scope, and Modules12 views
Write modular, maintainable code using functions, closures, and ES modules.
15 topics (15 versions)
7.1Function declarations and expressions
3
7.2Arrow functions and this
1
7.3Parameters defaults and rest
1
7.4Return values and early exits
1
7.5Scope var let const
1
7.6Closures and lexical scope
7.7Higher order functions
1
7.8Pure functions and side effects
7.9Organizing code into files
1
7.10ES modules import export
1
7.11Namespaces and globals
7.12Building a utilities module
7.13Reusing code across sketches
7.14Writing documentation with JSDoc
1
7.15Managing dependencies with npm
1
8. Number Systems and Recursion24 views
Understand binary/hex, bitwise reasoning, and apply recursion to patterns and problems.
15 topics (15 versions)
8.1Decimal binary and hexadecimal
6
8.2Base conversion algorithms
1
8.3Two's complement and signed values
1
8.4Bitwise operators and masks
2
8.5Color bit depth and channels
1
8.6Character encoding ASCII Unicode
8.7Floating point precision pitfalls
1
8.8Modulo arithmetic patterns
1
8.9Recursion fundamentals
1
8.10Base case and recursive case
1
8.11Tracing recursive calls
1
8.12Classic examples factorial fibonacci
1
8.13Recursive graphics trees and fractals
1
8.14Backtracking mazes and puzzles
5
8.15Recursion vs iteration tradeoffs
1
9. Object-Oriented Programming3 views
Design programs with objects, classes, and composition suited to interactive sketches.
15 topics (15 versions)
9.1Objects properties and methods
2
9.2Prototypes and delegation
9.3Constructor functions
9.4ES6 classes and syntax
9.5this binding and pitfalls
9.6Encapsulation and privacy
9.7Composition vs inheritance
9.8Getters setters and static members
1
9.9Polymorphism strategies
9.10Designing entities for sketches
9.11State machines for behavior
9.12Event driven object design
9.13Object arrays and collections
9.14Serialization to and from JSON
9.15UML style diagramming basics
10. Data Structures and Algorithms16 views
Use core data structures and algorithmic thinking to build efficient interactive systems.
15 topics (15 versions)
10.1Arrays lists and resizing
3
10.2Stacks and queues
1
10.3Sets and maps
2
10.4Linked lists fundamentals
2
10.5Trees and binary search trees
1
10.6Graphs nodes and edges
1
10.7Searching linear and binary
1
10.8Sorting selection insertion merge
10.9Complexity analysis Big O
10.10Hashing and hash tables
1
10.11Priority queues and heaps
10.12Grids spatial hashing and bins
1
10.13Pathfinding breadth first and A*
1
10.14Iterators generators and for...of
1
10.15Applying DS to interactive sims
1
11. External Files, Libraries, and Capstone Project9 views
Work with files and web APIs, integrate libraries, deploy, and build a polished capstone.
15 topics (15 versions)
11.1Loading JSON CSV and TSV
3
11.2preload() and asynchronous loading
1
11.3Loading images fonts and sounds
11.4Saving data and createWriter()
1
11.5File input drag and drop
11.6Fetching REST APIs with fetch()
11.7Parsing and validating responses
1
11.8CORS proxies and security basics
11.9Using third party libraries
1
11.10ml5.js for machine learning
11.11tone.js for advanced audio
1
11.12Packaging with Vite or Parcel
1
11.13Deploying to GitHub Pages
11.14Accessibility and inclusive design
11.15Capstone planning and milestones