creative-coding-domestika-2022

Resources and notes for students of the course Creative Coding 2.0 in JS: Animation, Sound, & Color at Domestika.

General Resources

New to JavaScript

The course is focused on creating visuals using JavaScript. In case you are new to the language, it's better to start with some of the fundamentals first:

• JavaScript basics
• JavaScript First Steps
• The Modern JavaScript Tutorial
• Creative Coding: Making Visuals with JavaScript

CanvasRenderingContext2D

The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a <canvas> element. It is used for drawing shapes, text, images, and other objects. - Canvas API - CanvasRenderingContext2D

canvas-sketch

canvas-sketch is a loose collection of tools, modules and resources for creating generative art in JavaScript and the browser using the <canvas> tag. It is designed to help create artworks and images with code, randomness, algorithms, and emergent systems. - canvas-sketch API Docs - canvas-sketch CLI Docs

Online templates

• StackBlitz template
• CodeSandbox template

UNIT 2 - Setup

L01 - JavaScript Recap

• JavaScript basics
• JavaScript First Steps
• The Modern JavaScript Tutorial
• Creative Coding: Making Visuals with JavaScript
• Lorem Picsum
• Promise

L02 - Online Setup

• StackBlitz
• CodeSandbox
• canvas-sketch-cli default template
• Fork StackBlitz template
• Fork CodeSandbox template

L03 - Offline Setup

• Editors:
  • Sublime Text
  • Visual Studio Code
• Browsers:
  • Google Chrome
  • Mozilla Firefox
  • Microsoft Edge
• Terminal (Windows):
  • Git for Windows
  • Cmder
  • ConEmu
• Runtime:
  • Node.js
  • NPM

L04 - Canvas-Sketch

• Canvas API
• CanvasRenderingContext2D (code snippet to draw a house)
• canvas-sketch API Docs
• canvas-sketch CLI Docs

UNIT 3 - SKEW

L01 - Rectangle

• The drawing state

L02 - Skewed Rectangle

• canvas-sketch-util/math

L03 - Distribution

• canvas-sketch-util/random

L04 - Colors

• canvas-sketch-util/color
• Riso Ink Colors
• riso-colors
• globalCompositeOperation

L05 - Clipping Mask

• CanvasRenderingContext2D.clip()

L06 - Random Seed

• canvas-sketch-util/random

UNIT 4 - CURVES

L01 - Quadratic

• Classes
• bezierCurveTo
• quadraticCurveTo

L02 - Cursor Interaction

• addEventListener
• removeEventListener
• MouseEvent
• Pythagorean Theorem

L03 - Multi-point

• Erik Natzke

L04 - Grid

• canvas-sketch-util/random
• Perlin Noise

L05 - Segments

• colormap

L06 - Animation

• Exporting Animations
• ffmpeg-installer

UNIT 5 - AUDIO

L01 - Press Play

• Artlist
• MP3 URL: ikoliks - Big City Lights
• Audio codecs
• Autoplay guide

L02 - Analyser

• Web Audio API
• frequencyBinCount
• SketchManager

L03 - Frequencies

• getFloatFrequencyData
• Notes are logarithmically spaced
• Why 44,100 Hz?

L04 - Arcs

• Jessica Svendsen : 100 Days : Müller-Brockmann
• cubic-beizer
• Robert Penner's Easing Functions
• eases

L05 - Müller-Brockmann

• Josef Müller-Brockmann

UNIT 6 - PARTICLES

L01 - Particle

• Classes

L02 - Forces

• addEventListener
• Pythagorean Theorem

L03 - Paul McNeil

• canvas-sketch-util/random
• Paul McNeil
• Reference

L04 - Scale & Colors

• colormap

L05 - Image Data

• Promise
• getImageData
• unsplash: Portrait by Art Hauntington
• unsplash: Balloon by Jesse Gardner
• Image URL 64x64 portrait
• Image URL 64x64 balloon