awesome-creative-coding
Coding tutorials
A curated list of resources and tutorials for creative coding
Creative Coding: Generative Art, Data visualization, Interaction Design, Resources.
13k stars
395 watching
881 forks
Language: HTML
last commit: almost 2 years agoLinked from 6 awesome lists
3d-graphicsartawesomeawesome-listcomputer-graphicscreative-codingdata-visualizationdesigngenerative-artgraphics-programminginformation-visualizationinteraction-designlistprogramming-graphicsresourcesshaderswebgl
Books | |||
| Generative Art: A Practical Guide | Practical guide using Processing | ||
| Generative Design | Visualize, Program, and Create with Processing | ||
| The Nature of Code | Simulating natural systems with Processing | ||
| Programming Design Systems | Practical introduction to the new foundations of graphic design | ||
| Learning Modern 3D Graphics Programming | Series of tutorials on using OpenGL to do graphical rendering | ||
| Programming Interactivity | Designer's Guide to Processing, Arduino, and openFrameworks | ||
| openFrameworks Essentials | openFrameworks beginner Guide for programmer, visual artist, or designer | ||
| Mastering openFrameworks: Creative Coding Demystified | Advanced in depth guide to openFrameworks | ||
| Algorithms for Visual Design Using the Processing Language | Experiment with design problems to create 3D animations, GUIs, and more | ||
| Foundation HTML5 Animation with JavaScript | Everything you need to know to create animation using the HTML5 canvas | ||
| Playing with chaos | Programming Fractals and Strange Attractors in JavaScript | ||
| Ray Tracing in One Weekend | Mini book about Ray Tracing | ||
| Processing 2: Creative Programming Cookbook | Guides you to explore the Processing environment using practical and useful recipes | ||
| Data-driven Graphic Design | Creative Coding for Visual Communication | ||
| Real-Time Rendering | Learn how to use modern techniques to generate synthetic three-dimensional images in a fraction of a second | ||
| Graphics Shaders: Theory and Practice | Introduction to shader programming in general, but focusing on the GLSL shading language | ||
| Anton's OpenGL 4 Tutorials | Practical guide to starting 3d programming with OpenGL | ||
| Physics for JavaScript Games, Animation, and Simulations | Teaches JavaScript programmers how to incorporate real physics into their HTML5 games, animations, and simulations | ||
| Math for Programmers | Book teaches you to solve mathematical problems in code | ||
| Synthèse d'images avec OpenGL (ES) | Book in french, which covers OpenGL, OpenGL ES and WebGL | ||
| Hands-On Music Generation with Magenta | Explore the role of deep learning in music generation and assisted music composition | ||
Online Books | |||
| The Book of Shaders | Step-by-step guide through the abstract and complex universe of fragment shaders | ||
| WebGL Fundamentals | WebGL from the ground up. No magic | ||
| WebGL 2 Fundamentals | WebGL2 from the ground up. No magic | ||
| Learn OpenGL | Extensive tutorial resource for learning Modern OpenGL | ||
| Scratchapixel 2.0 | Learn Computer Graphics From Scratch | ||
| ofBook | Community-written book/guide on openFrameworks | ||
| OGLdev | Collection of modern OpenGL tutorials by Etay Meiri | ||
| OpenGL Tutorial | Site dedicated to tutorials for OpenGL 3.3 and later | ||
| Open.gl | Guide that teach you the basics of using OpenGL | ||
| Pixel Shaders | Interactive Introduction to Graphics Programming | ||
| OpenGLBook | Free OpenGL programming tutorial in online book format | ||
| Graphics Programming Projects | Book about 3D computational graphics by Morgan McGuire | ||
| On Generative Algorithms | Notes about generating various organic patterns, with examples and Python code, by Anders Hoff | ||
| Computer Graphics from Scratch | A raytracing and rasterization textbook that teaches you how OpenGL and DirectX works | ||
| A Primer on Bézier Curves | A free book for when you really need to know how to do Bézier things | ||
| 3D Game Shaders For Beginners | Step-by-step guide to real-time shading techniques | ||
| XEM WebGL Guide | Step-by-step guide to WebGL | ||
| Creative Coding Notebooks | An authorial set of fundamental Python recipes on Creative Coding and Computer Art, by Diego Inácio | ||
| WebGL Academy | Learn WebGL and 3D algorithmic in a progressive and interactive way | ||
Courses | |||
| Create 3D Graphics in JS Using WebGL | Get started creating content with WebGL without any frameworks | ||
| Learn HTML5 Graphics and Animation | Introduction to the canvas 2D drawing API | ||
| Interactive 3D Graphics | Udacity course that teach you the principles of 3D computer graphics | ||
| Interactive Computer Graphics | Computer graphics course from Coursera | ||
| Kadenze Creative Coding | Selection of Kadenze courses covering p5.js, TensorFlow, Max/Jitter, and ChucK | ||
| Creative Programming for Digital Media & Mobile Apps | Coursera course on creative coding with processing | ||
| Imaginary Institute | Learn how to create gorgeous interactive graphics | ||
| Future Learn: Creative Coding | Use computer programming as a creative discipline to generate sounds, images, animations and more | ||
| Intro to JS: Drawing & Animation | Use JavaScript and the ProcessingJS library to create drawings and animations | ||
| Advanced JS: Natural Simulations | Combine JS, ProcessingJS, and mathematical concepts to simulate nature in your programs | ||
| Interactive Data Visualization with Processing | Learn how to read, map, and illustrate data with Processing | ||
| Programming Data Visualizations: A Coding Toolkit for Processing | Join information designer Nicholas Felton in the world of Processing | ||
| Introduction to Data Visualization | Join Nicholas Felton for a smart, comprehensive, and inspiring intro to data visualization | ||
| Programming Graphics I | , , - Learn generative art and Processing with art with Joshua Davis | ||
| Creative Coding with Canvas & WebGL | Workshop by Matt DesLauriers. that teaches you about generative art, interactive animations, 3D graphics, and shaders | ||
| Advanced Creative Coding with WebGL & Shaders | Workshop by Matt DesLauriers that go deeper into graphics programming, math and shaders | ||
| Three.js Journey | This course by Bruno Simon will teach you the secrets to create the coolest WebGL websites with Three.js whether your are a beginner or an advanced developer | ||
| 3D Computer Graphics Programming | Learn all the theory and the math behind 3D graphics while creating a software renderer from scratch using the C programming language | ||
Tools / Frameworks • Libraries • Ecosystems | |||
| Processing | [Cross-platform] - Computer programming language and IDE for visual arts | ||
| py5 | [Cross-platform] - A library that integrates Processing into the Python 3 ecosystem | ||
| Cinder | [Cross-platform] - Open source library for professional-quality creative coding in C++ | ||
| openFrameworks | [Cross-platform] - Open source C++ toolkit for creative coding | ||
| C4 | [iOS] - Open-source creative coding framework for iOS | ||
| Unity | [Mac, Win] - Game engine, but useful for creative coding and installations | ||
| Godot | [Cross-platform] - Open source game engine, that can also be used for all sorts of things | ||
| PlayCanvas | [Cross-platform] - Open source, realtime collaborative WebGL engine | ||
| hg_sdf | [Cross-platform] - GLSL library for building signed distance functions | ||
| nannou | [Cross-platform] - Open-source creative coding framework for the Rust language | ||
| thi.ng | [Cross-platform] - Open source collection of computational design tools for JavaScript, TypeScript, Clojure and ClojureScript languages | ||
| PixelKit | 886 | over 3 years ago | [iOS, Mac] - Open source, live graphics, Swift framework, powered by Metal |
| OPENRNDR | [Cross-platform] - Open source library for creative coding written in Kotlin | ||
| Phaser | [Cross-platform] - HTML5 framework for building games, uses both a Canvas and WebGL renderer | ||
| Canvas-sketch | 5,064 | over 2 years ago | [Cross-platform] - HTML5 framework for making generative artwork in JavaScript and the browser |
| AsyncGraphics | 343 | almost 2 years ago | [iOS, macOS] - Open source, live graphics, async / await, Swift package, powered by Metal |
| Lygia | 2,686 | almost 2 years ago | [Cross-platform] - Granular and multi-language (GLSL, HLSL, WGSL, MSL and CUDA) shader library designed for performance and flexibility |
| Fragment.tools | 835 | about 2 years ago | [Cross-platform] - A web development environment for creative coding |
Tools / Visual Programming Languages | |||
| vvvv | [Win] - Hybrid visual/textual live-programming environment for easy prototyping and development | ||
| NodeBox | [Mac, Win] - Cross-platform, node-based GUI for efficient data visualizations and generative design | ||
| TouchDesigner | [Mac, Win] - Visual development platform to create realtime projects | ||
| Quartz Composer | [Mac] - Development tool for processing and rendering graphical data | ||
| Vuo | [Mac] - Live interactive-media programming environment | ||
| Max | [Mac, Win] - Visual programming language for media | ||
| Pure Data | [Cross-platform] - Open source visual programming language for multimedia | ||
| ossia score | [Cross-platform] - Interactive, intermedia audio-visual sequencer | ||
| tooll | [Win] - Open source tool for creating interactive 3d content and animations | ||
| XOD | [Cross-platform] - Open source visual programming language and environment for microcontroller-based projects | ||
| Isadora | [Cross-platform] - Scene based media control software with integrated projection mapper | ||
| cables | [Cross-platform/Web] - Your model kit for creating beautiful interactive content. Currently in private beta, invites can be requested | ||
| eternal | 540 | over 3 years ago | [Web] - Programs as graphs and graphs as compositional tools for creation |
| Notch Builder | [Win] - Node-based authoring tool with a strong focus on real-time graphics. Currently in beta | ||
| JOY.JS | Realtime visual coding tool, easy to understand and aimed at beginners | ||
| Circles | [iPhone, iPad, Mac] - Live graphics node editor, powered by AsyncGraphics | ||
| TIC-80 | Make pixel art style games and art on a 240*136 pixel screen | ||
Tools / Sound Programming Languages | |||
| SuperCollider | [Multi-platform] - Platform for audio synthesis and algorithmic composition | ||
| ChucK | Strongly-timed, concurrent, and on-the-fly music programming language | ||
| TidalCycles | Domain specific language for live coding of pattern | ||
| Sonic Pi | The live coding music synth for everyone | ||
| Csound | A sound and music computing system | ||
| Orca | Live coding environment to quickly create procedural sequencers | ||
| handel | A small procedural programming language for writing songs in browser | ||
| Overtone | An open source audio environment designed to explore new musical ideas from synthesis and instrument building to live-coding | ||
| Melrōse | A MIDI producing environment for creating (live) music | ||
| Glicol | Graph-oriented live coding language and music/audio DSP library written in Rust | ||
Tools / Web Programming • Libraries | |||
| three.js | 103,265 | almost 2 years ago | JavaScript 3D library |
| regl | 5,261 | almost 2 years ago | Functional WebGL |
| Stackgl | Open software ecosystem for WebGL, built on top of browserify and npm | ||
| Paper.js | The swiss army knife of vector graphics scripting | ||
| Pixi.js | HTML 5 2D rendering engine that uses webGL with canvas fallback | ||
| p5.js | JavaScript library that starts with the original goal of Processing | ||
| Pts.js | JavaScript library for visualization and creative-coding | ||
| Fabric.js | Javascript canvas library, SVG-to-canvas parser | ||
| Maker.js | Parametric line drawing for SVG, CNC & laser cutters | ||
| OpenJSCAD | Programmatic 3D modeling in JavaScript | ||
| Sketch.js | Minimal JavaScript creative coding framework | ||
| Two.js | Two-dimensional drawing api geared towards modern web browsers | ||
| ClayGL | WebGL graphic library for building scalable Web3D applications | ||
| Proton | 2,427 | almost 2 years ago | A lightweight and powerful javascript particle engine |
| lightgl.js | 1,524 | about 4 years ago | A lightweight WebGL library |
| picogl.js | 790 | over 3 years ago | A minimal WebGL 2 rendering library |
| Alfrid | 233 | almost 4 years ago | A WebGL tool set |
| Babylon.js | 23,394 | almost 2 years ago | complete JavaScript framework for building 3D games with HTML 5 and WebGL |
| twigl | 2,718 | almost 2 years ago | A Tiny WebGL helper Library |
| luma.gl | 2,331 | almost 2 years ago | WebGL2 Components for Data Visualization |
| css-doodle | A web component for drawing patterns with CSS | ||
| OGL.js | 3,803 | almost 2 years ago | JavaScript 3D library (WebGL) |
| Zdog | A pseudo-3D engine for canvas & SVG | ||
| Oimo.js | 3,075 | about 5 years ago | Lightweight 3d physics engine for javascript |
| Ammo.js | 4,215 | over 2 years ago | Direct port of the Bullet physics engine to JavaScript using Emscripten |
| Theatre.js | 11,435 | about 2 years ago | Motion design library with visual tools |
| GraphicsJS | A lightweight open-source JavaScript library for graphics and animations (SVG/VML) | ||
Tools / Projection Mapping • VJing | |||
| MadMapper | [Mac] - Video mapping projections and Light mapping | ||
| VDMX | [Mac] - Realtime multimedia performance application | ||
| Modul8 | [Mac] - Real time video mixing and compositing | ||
| Resolume | [Mac, Win] - Mixing of digital video and effects in a realtime | ||
| CoGe VJ | [Mac] - VJ software designed for realtime HD video mixing and compositing with a modular user interface | ||
| VirtualMapper | 225 | about 9 years ago | Realtime preview tool for projection mapping |
| Millumin | [Mac] - A software to create and perform interactive audiovisual shows | ||
| Smode | [Win] - A real-time 2D/3D creation, compositing and video-mapping engine | ||
| Veejay | [Linux] - A live performance tool featuring simple non-linear editing and mixing from multiple sources (files, devices, streams...) | ||
Tools / Online | |||
| Shadertoy | Build and share shaders with the world and get inspired | ||
| Shader Park | A JavaScript library for creating interactive procedural 2D and 3D shaders | ||
| GLSL Sandbox | Online shader editor and gallery | ||
| Shdr Editor | Online shader editor | ||
| CodePen | Show case of advanced techniques with editable source code | ||
| Shadershop | Interface for programming GPU shaders | ||
| Vertexshaderart | Online shader editor and gallery | ||
| Cyos | Online shader editor | ||
| GlslEditor | Simple WebGL Fragment Shader Editor | ||
| OpenProcessing | Create and experiment with algorithmic design, Processing and P5.js | ||
| P5.js Editor | Online web editor for P5.js | ||
| LiveCodeLab | Run-as-you-type tool for VJs, musicians, teachers, students, kids | ||
| Turtletoy | Minimalistic API and online showcase for generative code. (Javascript) | ||
| ShaderGif | Open source home for art made with code (WebGL1/2, JavaScript Canvas & P5.js) | ||
| P5LIVE | p5.js live-coding environment | ||
| NEORT | Digital art platform for creative coders (Fragment Shader, Javascript Canvas) | ||
| Shelly | Learn programming by issuing instructions to a turtle | ||
| tixy.land | The most minimalist creative coding environment is alive | ||
| BBC Micro bot | Run your tweet on an 8-bit computer emulator | ||
| Hydra | Live code-able video synth and coding environment | ||
Tools / Hardware | |||
| Arduino | Open source microcontroller kits for building digital devices and interactive objects | ||
| Raspberry Pi | Small single-board computers | ||
| Puck.js | Open source JavaScript microcontroller you can program wirelessly | ||
| BeagleBoard | Low-power open source single-board computers | ||
| Makey Makey | Turn everyday objects into touchpads and combine them with the internet | ||
| Leap Motion | Sensor device that supports hand and finger motions as input | ||
| AxiDraw | Simple, modern, and precise pen plotter | ||
| Phidgets | Sensors, input devices and controllers for computers | ||
| Teensy | USB-based microcontroller development system | ||
| Lightform | AR projection mapping with built-in depth sensor | ||
Tools / Other | |||
| Structure Synth | [Cross-platform] - Application for generating 3D structures by specifying a design grammar | ||
| F3 | [Mac] - Powerful 3D design app that enables you to live code 3D form | ||
| Fragment | 167 | almost 7 years ago | [Mac]- App to live code GLSL graphics |
| ShaderTool | [Win] - Modern shader IDE for programmers and FX artists | ||
| Syphon | [Mac] - Allows applications to share frames with one another in realtime | ||
| KodeLife | Real-time GPU shader editor, live-code performance tool and graphics prototyping sketchpad | ||
| ISF | GLSL shaders for use in interactive applications | ||
| glslViewer | Live-coding console tool that renders GLSL Shaders | ||
| shoebot | [Cross-platform] - Shoebot is a creative coding environment designed for making vector graphics and animations with Python | ||
| DrawBot | [Mac] - Education oriented 2d graphics programming environment based on Python | ||
| Klak | 1,918 | over 2 years ago | A collection of scripts for creative coding with Unity |
| basil.js | Scripting (JS) in InDesign for designers and artists in the spirit of Processing | ||
| Konstrukt | 63 | over 2 years ago | [Cross-platform] - A commandline tool to generate different scaleable patterns as SVGs |
Learning Resources / Videos | |||
| The Coding Train | Daniel Shiffman makes videos about creative coding | ||
| MFGD - Fragment Shaders | YouTube playlist about fragment shaders | ||
| Shaders Laboratory | YouTube channel about shaders | ||
| Makin' Stuff Look Good | YouTube channel about shaders case studies | ||
| openFrameworks Tutorial Series | YouTube series to learning openFrameworks | ||
| openFrameworks tutorial | YouTube playlist about openFrameworks - not updated [2015] | ||
| Shader Tutorial Series | YouTube playlist about Shaders, using Visual Studio Code | ||
| Kha Tutorial Series | YouTube playlist about the Kha framework, built in Haxe | ||
| Fun with WebGL 2.0 | YouTube playlist about WebGL 2.0 | ||
| Modern OpenGL 3.0+ Tutorials | YouTube playlist about modern OpenGL | ||
| Vertexshaderart | YouTube playlist about vertex shaders | ||
| Diving in Three.js | YouTube playlist diving into three.js | ||
| Shadertoy Tutorials | YouTube playlist teaching you how to make shaders, starting with zero knowledge using shadertoy | ||
| WebGL Lightning | Introduction to WebGL lightning with Greg Tatum | ||
Learning Resources / Talks | |||
| Intro to WebGL Slides | Intro to WebGL with three.js | ||
| Inigo Quilez Live | Collection of live coding videos by Íñigo Quílez | ||
| There is also canvas | Bruno Imbrizi go through the use of canvas for creative coding at WebExpo 2016. Interactive slides | ||
| OpenGL 3D Game Tutorials | Beginners tutorial series about creating 3D games OpenG | ||
| How We Do This Shit | Talk on how tech-based artists do this financially | ||
| Making WebGL Dance | How I Learnt to Stop Worrying and Love Linear Algebra | ||
| The Pixel Factory | Talk about WebGL, GPUs and Math by Steven Wittens | ||
| Poetic Computation | Inspiring talk by Zach Lieberman | ||
| Generative Machines | FITC talk by Matt DesLauriers about his passion for generative art | ||
Learning Resources / Articles • Tutorials | |||
| Introduction to shaders | Part 1 of an introduction to shaders using threejs | ||
| Three.js 101 | Introduction to three.js from a creative coder perspective | ||
| lwjgl: Shaders | 1,872 | over 7 years ago | Shader tutorial in the context of lwjgl-basics |
| Shaders: A primer | A primer on shaders | ||
| Shaders: Second stage | The second part to the previous | ||
| WebGL Lessons — Fragment Shaders | 312 | about 9 years ago | A brief introduction to fragment shaders |
| WebGL Lessons — ThreeJS Shaders | 366 | almost 10 years ago | Using custom vertex and fragment shaders in ThreeJS |
| ThreeJS post-proces example | 24 | over 10 years ago | example of post-processing effects in ThreeJS |
| Ray Marching and Signed Distance Functions | Introduction to ray tracing | ||
| Introduction to Ray Tracing | A simple method for creating 3D images | ||
| GLSL lighting walkthrough | 460 | over 11 years ago | Phong shading tutorial with glslify |
| Three glslify example | 78 | over 9 years ago | Example on how to use three.js with glslify |
| WebGL Beyond Dom | 16 | almost 9 years ago | Greg Tatum explain the basic of WebGL using Regl |
| FBO particles | Article about FBO/GPGPU particles by @nicoptere | ||
| Ray marching (with THREE.js) | Article about ray marching with three.js by @nicoptere | ||
| Custom shaders with Three.JS | Introduction to custom shaders, uniforms, textures and lighting in three.js | ||
| An intro to modern OpenGL | First part of an introduction to modern OpenGL | ||
| Modern OpenGL Series | 811 | over 6 years ago | Good introduction to some of the OpenGL terms |
| Smooth minimum | Article about the smooth based primitive union | ||
| Modeling with distance functions | Collection of distance functions in one centralized place | ||
| Volumetric rendering | Explains how to create complex 3D shapes inside volumetric shaders | ||
| Real-time Rendering | Book, blog and collection of resources regarding real-time rendering | ||
| OpenGL 4 Shaders | Short and sweet introduction to OpenGL shaders by Anton Gerdelan | ||
| On ray casting, ray tracing, ray marching and the like | The title says it all. Introduction by Adok | ||
| Writing a small software renderer | Really good introduction to how basic software rendering works | ||
| WebGL Tutorials | Website with a really good collection of WebGL tutorials | ||
| Generating Geometry: 1 | , , - Beginner introduction on how to create geometry object | ||
| Into Vertex Shaders | Series of tutorials about WebGL, Three.js, and Three.bas | ||
| The Spaces of WebGL | Brief overview over the different coordinate systems through out the 3D graphics pipeline | ||
| WebGL Workshop | Short and sweet online introduction to WebGL | ||
| THREE.js & instanced geometry | Fluffy predator with three.js and instanced geometry | ||
| Particle Effects via Billboards | How to create a particle effects with billboarding and WebGL | ||
| Beautifully Animate Points with WebGL and regl | How to create GPGPU particles with regl | ||
| WebGL Tutorial: Directional Shadow Mapping without extensions | Introduction to the concepts behind real time directional light shadow mapping | ||
| WebGL Quest | A tutorial and a list of useful resources to use WebGL raymarching and distance functions easily | ||
| Exploring bump mapping with WebGL | Introduction to different bump mapping techniques | ||
| OpenGL/GLSL Shader Programing | Deck on OpenGL/GLSL shader programing | ||
| Particles in a Simplex Noise Flow Field | Perlin noise flow field tutorial | ||
| Flow Fields, Part 1 | Introduction to flow fields also known as vector fields | ||
| Flow Fields, Part 2 | Introduction to flow fields also known as vector fields | ||
| Graphics for Games | Introduction to 3D graphics programming including shaders, math post-processing etc. from Newcastle University | ||
| Three.js Basics | Introduction to Three.js by Eric Haines | ||
| An Interactive Introduction to WebGL and three.js | Slides from the SIGGRAPH 2017 WebGL workshop | ||
| How to Start Learning Computer Graphics Programming | Advice and thoughts on how to get started by Eric Arnebäck | ||
| What Every Coder Should Know About Gamma | Deep dive into the importance of gamma | ||
| HTML Canvas Deep Dive | Profound introduction to the canvas API | ||
| 31 days of Canvas tutorials | Collection of canvas tutorials by Seb Lee-Delisle | ||
| Pen Plotter Art & Algorithms Part 1 | , - How to use the AxiDraw pen plotter with JavaScript | ||
| Noise in Creative Coding | In-depth blog post about noise as an indispensable tool for creative coding | ||
| Cat Like Coding | In depth tutorials on math, algorithms and Unity | ||
| Fun Programming | Learn creative coding writing simple programs | ||
| Creative-coding on iOS with C4 | Introduction to C4 published on Creative Applications | ||
| COSMOS | An end-to-end tutorial on the design, programming and launch of an app using C4 | ||
| Particle Physics | Particle physics explained | ||
| Visualizing Algorithms | Looks at the use of visualization to understand, explain and debug algorithms | ||
| Adventures in Game Development World | Easy to understand collection of articles on game development, but relevant to creative coding as well | ||
| Amit’s Game Programming Information | Collection of resources on stuff like path-finding, Ai, math etc | ||
| Tips to Improve Your Generative Artwork | Tips to make your art look better | ||
| Working With Color in Generative Art | Tips on how to get color right | ||
Learning Resources / Interactive | |||
| Shader-school | 4,321 | over 5 years ago | Workshop for GLSL shaders and graphics programming |
| Webgl-workshop | 1,494 | over 2 years ago | The sequel to shader-school: Learn the WebGL API |
| Fragment-oundry | Interactive fragment shader tutorial | ||
| SDF Tutorial 1: box & balloon | Shadertoy tutorial on raytracing | ||
| HOWTO: Ray Marching | Shadertoy tutorial on Ray Marching | ||
| Raymarch Tutorial2 | Shadertoy raymarch tutorial | ||
| GLSL 2D Tutorials | Shadertoy GLSL 2D Tutorial | ||
| Bubble Breakdown | Shader breakdown by Perlin | ||
| Let's Make A Ray Marcher | Interactive Shader-Toy on writing a ray marcher | ||
| Raymarching | Interactive Shader-Toy raymarching tutorial | ||
Learning Resources / Quick References • Cheatsheets | |||
| Shaderific GLSL | OpenGL ES shading language reference | ||
| The Book of Shaders Glossary | Shader glossary by theme | ||
| gltut glossary pages: 1 | , , , , , , , - OpenGL 3D programming glossary | ||
| Canvas Cheatsheet | Quick and visual canvas cheatsheet | ||
| WebGL Cheatsheet | WebGL 1.0 API reference card | ||
| Glossary of Computer Graphics | Glossary of terms relating computer graphics | ||
| GLSL Reference Guide | OpenGL Shading Language quick reference guide | ||
| 3D Maths Cheat Sheet | Math cheatsheet by Anton Gerdelan, from his OpenGL book | ||
| docs.GL | Improvement of the official OpenGL documentation | ||
| OpenGL Shading Language | Khronos Group GLSL wiki | ||
| OpenGL 4.3 Reference Card | PDF Reference Card for the OpenGL 4.3 API | ||
| Easings | Interactive easing functions cheatsheet | ||
| PixelSpirit | GLSL library on the back of tarot cards, for learning and reference | ||
| Procedural Patterns And Noises | Collection of procedural patterns and procedural noises | ||
| Visual Noises | Visualize noise algorithms in 1D and 2D | ||
| Trigonoparty | Simple trigonometry visualisation | ||
| Morphogenesis | 2,067 | about 2 years ago | Exploration of how shapes, forms, and patterns emerge in nature |
Communities / Subreddits | |||
| r/creativecoding | Sharing and discussing the use of computer programming as a creative discipline | ||
| r/raytraycing | 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 | ||
| r/proceduralgeneration | Subreddit on procedural generation | ||
| r/MachineLearning | Subreddit on machine learning | ||
| r/generative | Subreddit on generative art and music | ||
Communities / Slack | |||
| Creative Coding Club | Creative Coding Club Slack | ||
Communities / Other | |||
| The Creative Coding Podcast | Iain and Seb discuss the ins and outs of creative coding | ||
| realtimevfx.com | Real Time VFX Community | ||
| Data Stories | Podcast on data visualization | ||
| 3D Programming Weekly Articles | Great collection of shader and math related resources | ||
| Pass The Pen | A community of front-end developers who build collaborative creative coding projects on CodePen | ||
| Creative Tech Weekly | A weekly newsletter of resources around creative technology | ||
Math | |||
| Math as code | 15,049 | over 4 years ago | Cheat-sheet for mathematical notation in code form |
| Coding Math | Teaches you the math you need to understand as a programmer | ||
| Math snippets | 117 | almost 10 years ago | Math snippets with graphic programming in mind |
| Formula Animations | The principles of painting with maths | ||
| Learning Maths again | 193 | almost 7 years ago | Collection of JS and GLSL math snippets |
| Eases | 378 | about 9 years ago | Grab-bag of modular easing equations |
| Math for Motion | Visualization of different motion equations | ||
| Matrix Multiplication | Matrix multiplication visualized | ||
| Algebra rules | The most useful rules of basic algebra | ||
| Immersive Math | Fully interactive linear algebra | ||
| Image Kernels | Interactive and visual introduction to image kernels | ||
| Sine and Cosine | Interactive explanation of sine and cosine | ||
| Perlin Noise | Perlin noise explained in detail | ||
| Vector Math for 3D Computer Graphics | Tutorial on vector algebra and matrix algebra from the viewpoint of computer graphics | ||
| Desmos | Graph functions, plot data, evaluate equations, explore transformations, and much more | ||
| MFGD | Math for game developers YouTube playlist | ||
| Essence of linear algebra | Essence of linear algebra YouTube playlist | ||
| Mathematics of Animation | Slides about the mathematics of animation ( ) | ||
| Sketching with Math and Quasi Physics | Beautiful and visual introduction to math and quasi physics | ||
| Gene Kogan: Perlin Noise | introduction to 2D and 3D perlin noise | ||
| Matrix Math and You | High level introduction to matrices | ||
| Mathematical Symbols | List of all mathematical symbols and signs | ||
| The magnificent 2d matrix | Interactive tool to better understand transformation matrices | ||
| Game Dev Movement cheatsheet with examples | JavaScript math snippets for movement | ||
| Maths & trigonometry cheat sheet for 2D & 3D games | Maths cheat-sheet for 2D and 3D game-makers | ||
| Matrices for Creative Coding | Introduction to matrices by Greg Tatum | ||
| Making Things With Maths | Talk by Steven Wittens about bezier curves, procedural generation, physics engines and fractals | ||
| MyPhysicsLab | Interactive real-time physics simulations, with formulas and code | ||
| Intuitive Math | Explanations of fields like Linear Algebra and Geometry designed to help you develop a visual intuition for what is going on | ||
| L-systems | 31 | almost 5 years ago | A Haskell package for L-systems |
| Linear Interpolation | Introduction to linear interpolation (also known as mix/lerp) | ||
| Practical use of Vector Math in Games | In-depth article on vectors for game math | ||
| Shepherding random numbers | Tiny guide to shepherding random numbers | ||
| Shepherding random grids | Tiny guide to shepherding random grids | ||
| Shepherding random growth | Tiny guide to shepherding random growth | ||
Machine learning • Computer Vision • Ai | |||
| ml4a | Machine learning for artists | ||
| Keras.js | Run Keras models (tensorflow backend) in the browser, with GPU support | ||
| Tesseract.js | Pure Javascript Multilingual OCR | ||
| Google ML | Cloud machine learning by Google | ||
| TensorFlow | Open source software library for machine intelligence | ||
| ConvNetJS | Deep Learning in your browser | ||
| Wekinator | Allows anyone to use machine learning | ||
| Machine Learning | 954 | over 5 years ago | Coding Train repo with links to machine learning resources |
| CreativeAi.net | Space to share creative Ai projects | ||
| AI Playbook | Ai microsite intended to help newcomers get started | ||
| Teachable Machine | 3,854 | about 5 years ago | Explore how machine learning works, live in the browser |
| TensorFlow.js | JavaScript library for training and deploying ML models in the browser and on Node.js | ||
| Hello TensorFlow | Fully commented TensorFlow.js demo | ||
| ml5.js | Friendly machine learning for the web | ||
| Model Zoo | Discover open source deep learning code and pretrained models | ||
| Runway | Toolkit that adds artificial intelligence capabilities to design and creative platforms | ||
| Lobe | Build, train, and ship custom deep learning models using a simple visual interface | ||
| ModelDepot | Platform for discovering, sharing, and discussing easy to use and pre-trained machine learning models | ||
Inspiration | |||
| OpenProcessing | Algorithmic Designs Created with Processing, p5js and processingjs | ||
| Dwitter | Social network for short JavaScript demos | ||
| Chrome Experiments | Showcase of web experiments written by the creative coding community | ||
| Codedoodl.es | Showcase of curated creative coding sketches | ||
| For your Processing | Projects and tutorials about Processing | ||
| Art From Code | Code sketches by Keith Peters | ||
| Generator.x | Flickr group about generative strategies in art & design | ||
| Generative Art | Flickr group about generative art | ||
| Inspiring Online | Open source micro blog about inspiring and creative works published online | ||
| People You Should Follow on CodePen | 692 | over 5 years ago | List of interesting people worth following |
| Raven Kwok | Tumblr by visual artist Raven Kwok | ||
| P5Art | Really good collection of experiments in Processing | ||
| Echophon | Tumblr with visual inspiration | ||
| Bees & Bombs | Tumblr with gifs by Dave | ||
| DevArt | Celebration of art made with code by artists that push the possibilities of creativity | ||
| Folds2d | Tumblr with curves, surfaces, scalar and vector fields | ||
Events | |||
| OFFF Festival | Digital design festival ( ) | ||
| Gray Area Festival | Creative coding, art and technology festival | ||
| Signal Festival | Showcase of light art and emerging technologies in Prague, the Czech Republic | ||
| Eyeo Festival | Bring together creative coders, data designers and creators working at the intersection of data, art and technology | ||
| Mutek | Organization dedicated to digital creativity in sound, music, and audio-visual art | ||
| Node | An open platform for the exchange on culture, arts and technology | ||
| Digital Design Days | 3 day event offering conferences, workshops, digital showcases & installations | ||
| CODAME ART+TECH | Projects and nonprofit events, to inspire through experience | ||
| NextArt Night | Inspiring people through creative uses of tech | ||
Museums • Galleries | |||
| ZKM — Zentrum für Kunst und Medien, Karlsruhe/Germany | ZKM organizes exhibitions and events on the effects of media, digitization, and globalization | ||
| Ars Electronica Center, Linz/Austria | Museum of the Future — a place where diverse blends of artistic genres, scientific domains and technological directions are displayed and processed | ||
| Technorama, Zurich/Switzerland | Technorama allows hands-on experiences of hundreds of natural phenomena and technology | ||
| Kate Vass Gallery - Zürich/Switzerland | Contemporary art gallery presenting works by international established, mid-career, and emerging artists focusing on photography and new technologies | ||
| Digital Art Museum - Berlin/Germany | Digital Art Museum is an resource for the history and practice of digital fine art | ||
| NXT Museum - Amsterdam/Netherlands | The first museum in the Netherlands dedicated to new media art | ||
Schools • Workshops | |||
| Goldsmiths, UoL, MA Computational Art | Graduate program in London which develops your arts practice through the expressive world of creative computation | ||
| UAL Creative Computing Institute | school in London working at the intersection of creativity and computational technologies | ||
| School for Poetic Computation | School in New York that explore the intersections of code, design, hardware and theory | ||
| Copenhagen Institute of Interaction Design | Hosts a range of educational initiatives, most notably, the Interaction Design Programme and the CIID Summer School | ||
| Residencies, Fellowships, Summer Schools | Huge list of residencies, fellowships and summer schools around the world (Navigate with the bottom left tabs) | ||
Blogs • Websites | |||
| CreativeApplications.Net [CAN] | Famous digital art blog | ||
| iquilezles.org | Home of Íñigo Quílez, specialised in GLSL and math snippets | ||
| bit-101.com | Blog by Keith Peters, specialised in creative coding | ||
| ibreakdownshaders | Explore the math behind shaders | ||
| adriancourrèges.com | Blog of software engineer Adrian Courrèges. Articles about game graphics studies etc | ||
| clicktorelease.com | Home of Jaume Sanchez Elias, with demos, talks, articles on WebGL and WebVR | ||
| syntopia | Blog about generative art and systems, by Mikael Hvidtfeldt Christensen | ||
| madebyevan.com | WebGL experiments and articles by Evan Wallace | ||
| songho.ca | Home of Song Ho Ahn, with a good collection of tutorials on OpenGL and math | ||
| simonschreibt.de | Game art tricks, design tricks by Simon schreibt | ||
| sighack.com | Blog about generative art algorithms and techniques, by Manohar Vanga | ||
| jsdo.it-archives | 13 | almost 2 years ago | Compilation of WebGL experiments including comparisons on WebGL frameworks and physics engine (oimo.js, cannon.js, ammo.js) |
| WebAudio Weekly | Newsletter to know everything about the WebAudio API | ||
Related | |||
| Awesome opengl | 2,182 | about 3 years ago | Curated list of awesome OpenGL libraries, debuggers and resources |
| Awesome webgl | 1,356 | about 3 years ago | Curated list of awesome WebGL libraries, resources and much more |
| Awesome canvas | 1,633 | about 2 years ago | Curated list of awesome HTML5 canvas with examples, related articles and posts |
| Awesome audio visualization | 4,659 | over 3 years ago | Curated list about Audio Visualization |
| Awesome computer vision | 21,139 | over 2 years ago | Curated list of awesome computer vision resources |
| Awesome visualization research | 935 | over 6 years ago | Curated list of recommended research papers and other readings on data visualization |
| Awesome livecoding | 2,600 | about 2 years ago | Curated list of livecoding languages and tools |
| Awesome graphics | 1,060 | over 6 years ago | Curated list of computer graphics tutorials and resources |
| Graphics resources | 1,802 | over 5 years ago | Curated list of graphic programming resources |
| Magic tools | 13,769 | almost 2 years ago | Curated list of game development resources to make magic happen |
| Hanecci’s link collection | Link collection of ray marching on the GPU | ||
| Awesome public datasets | 61,377 | almost 2 years ago | Curated list of public available datasets, mostly free resources |
| Link collection of ray marching on the GPU | Curated list from 2013 | ||
| 3D Machine Learning | 9,813 | about 2 years ago | A resource repository for 3D machine learning |
| Awesome creative technology | 456 | almost 2 years ago | Curated list of Creative Technology groups, companies, studios, collectives and more |
sindresorhus/awesome
jnv/lists
toplap/awesome-livecoding
beardicus/awesome-plotters
tidalcycles/awesome-tidalcycles
0ex/more-awesome
armory3d/haxebullet
playcanvas/engine
whitestormjs/whs.js
nbro/understanding-math
voxelboy/resources-for-writing-shaders-in-unity
zheng95z/fun-with-computer-graphics
kavex/gamedev-resources
trungtle/tlvulkanrenderer
khronosgroup/gltf-sample-models
mgsx-dev/gdx-gltf