tech-creative-coding.md

Resources for beginners

Never coded? Start with this video: https://youtu.be/4JzDttgdILQ?feature=shared&t=1052.

Processing

• You can code directly in the online editor: https://editor.p5js.org/
• Tutorial: https://p5js.org/tutorials/

Canvas (underlying technology for Processing)

• This is natively supported by the browser, you can use for example Codepen: https://codepen.io/mattdesl/pen/BMGZJZ?editors=0010
• Tutorial: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

D3

• A super flexible library for svg manipulation, used a lot for data visualiation. An online platform that I recommend for this is Observable.
• It's quite complex, so I wouldn't recommend it to start your coding journey, only after you know how to code a little better
• Tutorial https://observablehq.com/@d3/learn-d3

SVG (underlying technology for D3)

• Natively supported by the browser, you can use Codepen: https://codepen.io/tukkajukka/pen/EaLQeJ?editors=0010
• Tutorial: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial

More advanced

WebGL

• Natively supported by the browser, but you need to set up the coding environment on your machine.
• https://thebookofshaders.com/
• https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html
• https://threejs-journey.com/lessons/shaders (paid course)

Inspiration

Not sure what to code? Here's some inspiration:

• http://www.generative-gestaltung.de/2/
• https://hendriklammers.github.io/month-of-shaders/