Other resources
Here's a few resources and tips about what to do after this course.
Tips and tricks
Map a parameter based on the distance to center
let cx = width / 2;
let cy = height / 2;
let distToCenter = dist(x, y, cx, cy);
let maxDistToCenter = dist(0, 0, cx, cy);
let normalisedDistance = 1 - distToCenter / maxDistToCenter;
Example sketch: https://editor.p5js.org/otsohavanto/sketches/68Z56qF49
p5
- Code! Programming with p5.js by Daniel Shiffman
- https://www.khanacademy.org/computing/computer-programming/programming - good introductory tutorial for recapping some of the course's topics
- https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA - Daniel Shiffman's p5.js tutorials
- Nature of Code
- https://natureofcode.com/book/chapter-1-vectors/ - Introduction to modelling natural systems in Java with Processing
- Nature of Code examples with p5.js: https://github.com/nature-of-code/noc-examples-p5.js
- https://thecodingtrain.com/learning/nature-of-code/ - New version of the book as video tutorials and in p5.js
- https://natureofcode.com/book/chapter-1-vectors/ - Introduction to modelling natural systems in Java with Processing
- Deep dive to JS: https://javascript.info/
Example sketches for object oriented particle systems
Other JS libraries
- http://paperjs.org/ - Vector graphics scripting framework
- https://threejs.org/ - 3D library
- https://www.babylonjs.com/ - Another 3D library
- https://ptsjs.org/ - A library for visualization and creative-coding
- https://aframe.io/ - A web framework for building 3D/AR/VR experiences
- https://zzz.dog/ - Round, flat, designer-friendly pseudo-3D engine for canvas & SVG
- https://github.com/lo-th/Oimo.js - Lightweight 3d physics engine for javascript
Other tools/technologies
- Shaders
- Processing - Based on Java, p5.js is a JavaScript version of Processing
- OpenFrameworks - A framework similar to Processing for C++
- TouchDesigner - Node based visual programming language for real time interactive multimedia content
- JS in AfterEffects:
- Figma plugins in JS