Creative coding

Build animated and interactive sketches in JavaScript. The tutorials move from variables and loops to reusable functions, classes, easing, and parameter exploration.

• VariationCompare random values, waves, and noise across time, space, and mouse input.
• Variables and interactivityDraw with values, mouseX, and mouseY.
• Lines and progressionsPosition repeated shapes with loops and arithmetic.
• Circles and spiralsTurn sin and cos into curved arrangements.
• GridsCompare single-loop and nested-loop layouts.
• Animation and easingMove several properties with interpolation and easing.
• Explore parameter spacesMap parameters to the mouse for rapid visual experiments.

Use Processing to study the same visual ideas in Java. These notes cover the draw loop, input, arrays, randomness, geometric arrangements, and Arduino communication.

• Processing and animationStart with setup, draw, mouse input, and time.
• Arrays and animationCoordinate collections of changing values.
• Arranging itemsBuild lines, waves, circles, and spirals.
• Animation and randomnessCombine time, random values, arrays, and noise.
• Serial communicationExchange structured values with an Arduino.

Keep the language and editor references nearby while working on a sketch. These pages cover arrays, iteration, online editors, and a local Visual Studio Code setup.

• p5.js resourcesLearning paths, editors, references, and books.
• JavaScript arraysArray syntax, methods, learning material, and references.
• Iteration methodsMap, filter, reduce, find, and related patterns.
• Visual Studio Code for p5.jsSet up local sketch development.

Connect sketches to machine-learning models and the physical world. The notes include pose input, image classification, sensor calibration, and serial links.

• DoodleNet troubleshootingDiagnose the 15 common canvas-classification failures.
• PoseNetUse body pose as live sketch input.
• Calibrate a sensorOffset a changing input from a chosen start position.
• Physical computingContinue into Arduino, sensors, and browser-connected devices.

Move from individual sketches to project work. Course notes cover collaboration and language constructs; publishing notes cover reuse and licensing.

• Language constructsConditionals and switch patterns for project code.
• Collaboration tipsDivide a mixed code, circuit, and fabrication project.
• Choosing a licensePick terms for software and creative work.
• Example codesBrowse complete sketches from the Creative Coding Lab.