5.8 KiB
5.8 KiB
Creative Coding Glore
A curated list of beginner friendly tutorials, tools, resources and shiny things to get you started.
Table of Contents
[Coming when I have a final strucure]
Books
- Generative Art: A Practical Guide - A practical guide using Processing.
- Generative Design - Visualize, Program, and Create with Processing.
- The Nature of Code - Simulating natrual systems with Processing.
- The Book of Shaders - Step-by-step guide through the abstract and complex universe of Fragment Shaders.
- Programming Design Systems - Book that teaches a practical introduction to the new foundations of graphic design.
- Pixel Shaders - An Interactive Introduction to Graphics Programming.
- Learning Modern 3D Graphics Programming - A series of tutorials on using OpenGL to do graphical rendering.
- Scratchapixel 2.0 - Learn Computer Graphics From Scratch!
- Programming Interactivity - A Designer's Guide to Processing, Arduino, and openFrameworks.
- Algorithms for Visual Design Using the Processing Language - Experiment with design problems to create 3D animations, GUIs, and more.
- Data-driven Graphic Design - Creative Coding for Visual Communication.
Subreddits
- r/rraytraycing - Subreddit on raytracing.
- r/opengl - News and discussion about OpenGL on all platforms.
- r/graphicsprogramming - Subreddit on graphics programming.
- r/processing - Subreddit on Processing.
- r/shaders - Subreddit on shaders.
Communities
- realtimevfx.com - Real Time VFX Community.
Frameworks
- Processing- Computer programming language and IDE for visual arts.
- Cinder - Open source library for professional-quality creative coding in C++.
- openFrameworks - Open source C++ toolkit for creative coding.
- vvvv - Hybrid visual/textual live-programming environment for easy prototyping and development.
Tools
- Shadertoy - Build and share shaders with the world and get inspired.
- F3 - Powerful 3D design app that enables you to live code 3D form.
- Fragment - Mac app to live code GLSL graphics.
- Chrome Shader Editor - Live editing shaders in the browser.
Libs / Ecosystems
- Stackgl - Open software ecosystem for WebGL, built on top of browserify and npm.
- three.js - JavaScript 3D library.
Learning material
- Coding Rainbow -
- Shaders - Shader tutorial in the context of lwjgl-basics.
- WebGL 2 Fundamentals - WebGL2 from the ground up. No magic.
- Shaders: A primer - A primer on shaders.
- Shaders: Second stage - The second part to the previous.
- WebGL Lessons — Fragment Shaders - A brief introduction to fragment shaders.
- WebGL Lessons — ThreeJS Shaders - Using custom vertex and fragment shaders in ThreeJS.
Interactive tutorials
- Shader-school - A workshopper for GLSL shaders and graphics programming.
- webgl-workshop - The sequel to shader-school: Learn the WebGL API.
- Fragment-oundry - Interactive fragment shader tutorial.
- https://www.shadertoy.com/view/Xl2XWt
- https://www.shadertoy.com/view/XllGW4
- https://www.shadertoy.com/view/XlBGDW
- https://www.shadertoy.com/view/Md23DV (2D!)
Math
-
Coding Math - Video tutorials designed to teach you the math you need to understand as a programmer.
-
https://paroj.github.io/gltut/Basics/Intro%20Graphics%20and%20Rendering.html
-
http://web.cs.wpi.edu/~emmanuel/courses/cs543/slides/lecture04_p1.pdf
Raytracing
- http://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-ray-tracing/how-does-it-work
- http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/
Shader References
- https://thebookofshaders.com/glossary/
- http://www.shaderific.com/glsl/
- https://paroj.github.io/gltut/Basics/Intro%20Glossary.html
Related awesome lists:
Glossery
Take from here: https://paroj.github.io/gltut/Basics/Intro%20Glossary.html
Shader Examples and Snippets
-
https://github.com/ashima/webgl-noise Perlin Noise