1335 lines
66 KiB
HTML
1335 lines
66 KiB
HTML
<h1 id="awesome-creative-coding-awesome">Awesome Creative Coding <a
|
||
href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://awesome.re/badge-flat.svg" alt="Awesome" /></a></h1>
|
||
<h1 id="section"><a
|
||
href="https://github.com/terkelg/awesome-creative-coding"><img src="https://raw.githubusercontent.com/terkelg/awesome-creative-coding/master/cover.png"></a></h1>
|
||
<blockquote>
|
||
<p>Carefully curated list of awesome <a
|
||
href="https://en.wikipedia.org/wiki/Creative_coding">creative coding</a>
|
||
resources primarily for beginners/intermediates.</p>
|
||
</blockquote>
|
||
<p>Creative coding is a different discipline than programming systems.
|
||
The goal is to create something expressive instead of something
|
||
functional. <strong>Interaction design</strong>, <strong>information
|
||
visualization</strong> and <strong>generative art</strong> are all
|
||
different types of creative coding – which has become a household term
|
||
describing <strong>artworks articulated as code</strong>.</p>
|
||
<p><em>Please read the <a href="contributing.md">contribution
|
||
guidelines</a> before contributing.</em></p>
|
||
<h2 id="contents">Contents</h2>
|
||
<ul>
|
||
<li><a href="#books">Books</a></li>
|
||
<li><a href="#online-books">Online Books</a></li>
|
||
<li><a href="#courses">Courses</a></li>
|
||
<li><a href="#tools">Tools</a>
|
||
<ul>
|
||
<li><a href="#frameworks--libraries--ecosystems">Frameworks • Libraries
|
||
• Ecosystems</a></li>
|
||
<li><a href="#visual-programming-languages">Visual Programming
|
||
Languages</a></li>
|
||
<li><a href="#sound-programming-languages">Sound Programming
|
||
Languages</a></li>
|
||
<li><a href="#web-programming--libraries">Web Programming •
|
||
Libraries</a></li>
|
||
<li><a href="#projection-mapping--vjing">Projection Mapping •
|
||
VJing</a></li>
|
||
<li><a href="#online">Online</a></li>
|
||
<li><a href="#hardware">Hardware</a></li>
|
||
<li><a href="#other">Other</a></li>
|
||
</ul></li>
|
||
<li><a href="#learning-resources">Learning Resources</a>
|
||
<ul>
|
||
<li><a href="#videos">Videos</a></li>
|
||
<li><a href="#talks">Talks</a></li>
|
||
<li><a href="#articles">Articles</a>
|
||
<ul>
|
||
<li><a href="#shaders--opengl--webgl">Shaders • OpenGL • WebGL</a></li>
|
||
<li><a href="#canvas">Canvas</a></li>
|
||
<li><a href="#hardware-1">Hardware</a></li>
|
||
<li><a href="#other-1">Other</a></li>
|
||
</ul></li>
|
||
<li><a href="#interactive">Interactive</a></li>
|
||
<li><a href="#quick-references--cheat-sheets">Quick References • Cheat
|
||
Sheets</a></li>
|
||
</ul></li>
|
||
<li><a href="#communities">Communities</a>
|
||
<ul>
|
||
<li><a href="#subreddits">Subreddits</a></li>
|
||
<li><a href="#slack">Slack</a></li>
|
||
<li><a href="#other-2">Other</a></li>
|
||
</ul></li>
|
||
<li><a href="#math">Math</a></li>
|
||
<li><a href="#machine-learning--computer-vision--ai">Machine learning •
|
||
Computer Vision • AI</a></li>
|
||
<li><a href="#inspiration">Inspiration</a></li>
|
||
<li><a href="#events">Events</a></li>
|
||
<li><a href="#schools--workshops">Schools • Workshops</a></li>
|
||
<li><a href="#blogs--websites">Blogs • Websites</a></li>
|
||
<li><a href="#related">Related</a></li>
|
||
</ul>
|
||
<h2 id="books">Books</h2>
|
||
<ul>
|
||
<li><a href="https://www.manning.com/books/generative-art">Generative
|
||
Art: A Practical Guide</a> - Practical guide using Processing.</li>
|
||
<li><a href="https://www.generative-gestaltung.de/">Generative
|
||
Design</a> - Visualize, Program, and Create with Processing.</li>
|
||
<li><a href="https://natureofcode.com/">The Nature of Code</a> -
|
||
Simulating natural systems with Processing.</li>
|
||
<li><a href="https://programmingdesignsystems.com/">Programming Design
|
||
Systems</a> - Practical introduction to the new foundations of graphic
|
||
design.</li>
|
||
<li><a href="https://paroj.github.io/gltut/">Learning Modern 3D Graphics
|
||
Programming</a> - Series of tutorials on using OpenGL to do graphical
|
||
rendering.</li>
|
||
<li><a
|
||
href="https://shop.oreilly.com/product/9780596154158.do">Programming
|
||
Interactivity</a> - Designer’s Guide to Processing, Arduino, and
|
||
openFrameworks.</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/application-development/openframeworks-essentials">openFrameworks
|
||
Essentials</a> - openFrameworks beginner Guide for programmer, visual
|
||
artist, or designer.</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/application-development/mastering-openframeworks-creative-coding-demystified">Mastering
|
||
openFrameworks: Creative Coding Demystified</a> - Advanced in depth
|
||
guide to openFrameworks.</li>
|
||
<li><a
|
||
href="https://www.amazon.com/Algorithms-Visual-Design-Processing-Language/dp/0470375485">Algorithms
|
||
for Visual Design Using the Processing Language</a> - Experiment with
|
||
design problems to create 3D animations, GUIs, and more.</li>
|
||
<li><a
|
||
href="https://link.springer.com/book/10.1007/978-1-4302-3666-5">Foundation
|
||
HTML5 Animation with JavaScript</a> - Everything you need to know to
|
||
create animation using the HTML5 canvas.</li>
|
||
<li><a href="https://www.playingwithchaos.net/">Playing with chaos</a> -
|
||
Programming Fractals and Strange Attractors in JavaScript.</li>
|
||
<li><a
|
||
href="https://www.amazon.com/Ray-Tracing-Weekend-Minibooks-Book-ebook/dp/B01B5AODD8/">Ray
|
||
Tracing in One Weekend</a> - Mini book about Ray Tracing.</li>
|
||
<li><a
|
||
href="https://www.packtpub.com/hardware-and-creative/processing-2-creative-programming-cookbook">Processing
|
||
2: Creative Programming Cookbook</a> - Guides you to explore the
|
||
Processing environment using practical and useful recipes.</li>
|
||
<li><a href="https://www.amazon.com/dp/1472578309/">Data-driven Graphic
|
||
Design</a> - Creative Coding for Visual Communication.</li>
|
||
<li><a
|
||
href="https://www.amazon.com/Real-Time-Rendering-Third-Tomas-Akenine-Moller/dp/1568814240">Real-Time
|
||
Rendering</a> - Learn how to use modern techniques to generate synthetic
|
||
three-dimensional images in a fraction of a second.</li>
|
||
<li><a
|
||
href="https://www.amazon.com/Graphics-Shaders-Theory-Practice-Second/dp/1568814348/">Graphics
|
||
Shaders: Theory and Practice</a> - Introduction to shader programming in
|
||
general, but focusing on the GLSL shading language.</li>
|
||
<li><a href="https://www.amazon.com/gp/product/B00LAMQYF2/">Anton’s
|
||
OpenGL 4 Tutorials</a> - Practical guide to starting 3d programming with
|
||
OpenGL.</li>
|
||
<li><a href="https://www.apress.com/us/book/9781430263371">Physics for
|
||
JavaScript Games, Animation, and Simulations</a> - Teaches JavaScript
|
||
programmers how to incorporate real physics into their HTML5 games,
|
||
animations, and simulations.</li>
|
||
<li><a href="https://www.manning.com/books/math-for-programmers">Math
|
||
for Programmers</a> - Book teaches you to solve mathematical problems in
|
||
code.</li>
|
||
<li><a
|
||
href="https://www.d-booker.fr/opengl/78-synthese-d-images.html">Synthèse
|
||
d’images avec OpenGL (ES)</a> - Book in french, which covers OpenGL,
|
||
OpenGL ES and WebGL.</li>
|
||
<li><a
|
||
href="https://alexandredubreuil.com/publications/2020-01-31-music-generation-with-magenta-deep-learning-in-music-generation/">Hands-On
|
||
Music Generation with Magenta</a> - Explore the role of deep learning in
|
||
music generation and assisted music composition.</li>
|
||
</ul>
|
||
<h2 id="online-books">Online Books</h2>
|
||
<ul>
|
||
<li><a href="https://thebookofshaders.com/">The Book of Shaders</a> -
|
||
Step-by-step guide through the abstract and complex universe of fragment
|
||
shaders.</li>
|
||
<li><a href="https://webglfundamentals.org/">WebGL Fundamentals</a> -
|
||
WebGL from the ground up. No magic.</li>
|
||
<li><a href="https://webgl2fundamentals.org/">WebGL 2 Fundamentals</a> -
|
||
WebGL2 from the ground up. No magic.</li>
|
||
<li><a href="https://learnopengl.com/">Learn OpenGL</a> - Extensive
|
||
tutorial resource for learning Modern OpenGL.</li>
|
||
<li><a href="https://www.scratchapixel.com/">Scratchapixel 2.0</a> -
|
||
Learn Computer Graphics From Scratch.</li>
|
||
<li><a
|
||
href="https://openframeworks.cc/ofBook/chapters/foreword.html">ofBook</a>
|
||
- Community-written book/guide on openFrameworks.</li>
|
||
<li><a href="http://ogldev.atspace.co.uk/">OGLdev</a> - Collection of
|
||
modern OpenGL tutorials by Etay Meiri.</li>
|
||
<li><a href="http://www.opengl-tutorial.org/">OpenGL Tutorial</a> - Site
|
||
dedicated to tutorials for OpenGL 3.3 and later.</li>
|
||
<li><a href="https://open.gl/">Open.gl</a> - Guide that teach you the
|
||
basics of using OpenGL.</li>
|
||
<li><a href="http://pixelshaders.com/">Pixel Shaders</a> - Interactive
|
||
Introduction to Graphics Programming.</li>
|
||
<li><a href="http://openglbook.com/">OpenGLBook</a> - Free OpenGL
|
||
programming tutorial in online book format.</li>
|
||
<li><a
|
||
href="http://graphicscodex.com/projects/projects/index.html">Graphics
|
||
Programming Projects</a> - Book about 3D computational graphics by
|
||
Morgan McGuire.</li>
|
||
<li><a href="http://inconvergent.net/generative/">On Generative
|
||
Algorithms</a> - Notes about generating various organic patterns, with
|
||
examples and Python code, by Anders Hoff.</li>
|
||
<li><a
|
||
href="http://www.gabrielgambetta.com/computer-graphics-from-scratch/introduction.html">Computer
|
||
Graphics from Scratch</a> - A raytracing and rasterization textbook that
|
||
teaches you how OpenGL and DirectX works.</li>
|
||
<li><a href="https://pomax.github.io/bezierinfo/">A Primer on Bézier
|
||
Curves</a> - A free book for when you really need to know how to do
|
||
Bézier things.</li>
|
||
<li><a href="https://lettier.github.io/3d-game-shaders-for-beginners">3D
|
||
Game Shaders For Beginners</a> - Step-by-step guide to real-time shading
|
||
techniques.</li>
|
||
<li><a href="https://xem.github.io/articles/webgl-guide.html">XEM WebGL
|
||
Guide</a> - Step-by-step guide to WebGL.</li>
|
||
<li><a
|
||
href="https://diegoinacio.github.io/creative-coding-notebooks-page/">Creative
|
||
Coding Notebooks</a> - An authorial set of fundamental Python recipes on
|
||
Creative Coding and Computer Art, by Diego Inácio.</li>
|
||
<li><a href="http://www.webglacademy.com">WebGL Academy</a> - Learn
|
||
WebGL and 3D algorithmic in a progressive and interactive way.</li>
|
||
</ul>
|
||
<h2 id="courses">Courses</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://egghead.io/courses/create-3d-graphics-in-javascript-using-webgl">Create
|
||
3D Graphics in JS Using WebGL</a> - Get started creating content with
|
||
WebGL without any frameworks.</li>
|
||
<li><a
|
||
href="https://egghead.io/courses/learn-html5-graphics-and-animation">Learn
|
||
HTML5 Graphics and Animation</a> - Introduction to the canvas 2D drawing
|
||
API.</li>
|
||
<li><a href="https://classroom.udacity.com/courses/cs291">Interactive 3D
|
||
Graphics</a> - Udacity course that teach you the principles of 3D
|
||
computer graphics.</li>
|
||
<li><a
|
||
href="https://www.coursera.org/learn/interactive-computer-graphics">Interactive
|
||
Computer Graphics</a> - Computer graphics course from Coursera.</li>
|
||
<li><a href="http://try.kadenze.com/creative-coder/">Kadenze Creative
|
||
Coding</a> - Selection of Kadenze courses covering p5.js, TensorFlow,
|
||
Max/Jitter, and ChucK.</li>
|
||
<li><a href="https://www.coursera.org/learn/digitalmedia">Creative
|
||
Programming for Digital Media & Mobile Apps</a> - Coursera course on
|
||
creative coding with processing.</li>
|
||
<li><a href="https://imaginary-institute.com/">Imaginary Institute</a> -
|
||
Learn how to create gorgeous interactive graphics.</li>
|
||
<li><a href="https://www.futurelearn.com/courses/creative-coding">Future
|
||
Learn: Creative Coding</a> - Use computer programming as a creative
|
||
discipline to generate sounds, images, animations and more.</li>
|
||
<li><a
|
||
href="https://www.khanacademy.org/computing/computer-programming/programming">Intro
|
||
to JS: Drawing & Animation</a> - Use JavaScript and the ProcessingJS
|
||
library to create drawings and animations.</li>
|
||
<li><a
|
||
href="https://www.khanacademy.org/computing/computer-programming/programming-natural-simulations">Advanced
|
||
JS: Natural Simulations</a> - Combine JS, ProcessingJS, and mathematical
|
||
concepts to simulate nature in your programs</li>
|
||
<li><a
|
||
href="https://www.lynda.com/Processing-tutorials/Interactive-Data-Visualization-Processing/97578-2.html">Interactive
|
||
Data Visualization with Processing</a> - Learn how to read, map, and
|
||
illustrate data with Processing.</li>
|
||
<li><a
|
||
href="https://www.skillshare.com/classes/Programming-Data-Visualizations-A-Coding-Toolkit-for-Processing/1782124914">Programming
|
||
Data Visualizations: A Coding Toolkit for Processing</a> - Join
|
||
information designer Nicholas Felton in the world of Processing.</li>
|
||
<li><a
|
||
href="https://www.skillshare.com/classes/Introduction-to-Data-Visualization-From-Data-to-Design/1435958330">Introduction
|
||
to Data Visualization</a> - Join Nicholas Felton for a smart,
|
||
comprehensive, and inspiring intro to data visualization.</li>
|
||
<li><a
|
||
href="https://www.skillshare.com/classes/Programming-Graphics-I-Introduction-to-Generative-Art/782118657">Programming
|
||
Graphics I</a>, <a
|
||
href="https://www.skillshare.com/classes/Programming-Graphics-II-Generative-Art-Animation/388564917">2</a>,
|
||
<a
|
||
href="https://www.skillshare.com/classes/Programming-Graphics-III-Painting-with-Sound/738981508?">3</a>
|
||
- Learn generative art and Processing with art with Joshua Davis.</li>
|
||
<li><a href="https://frontendmasters.com/courses/canvas-webgl/">Creative
|
||
Coding with Canvas & WebGL</a> - Workshop by Matt DesLauriers. that
|
||
teaches you about generative art, interactive animations, 3D graphics,
|
||
and shaders.</li>
|
||
<li><a
|
||
href="https://frontendmasters.com/courses/webgl-shaders/">Advanced
|
||
Creative Coding with WebGL & Shaders</a> - Workshop by Matt
|
||
DesLauriers that go deeper into graphics programming, math and
|
||
shaders.</li>
|
||
<li><a href="https://threejs-journey.com/">Three.js Journey</a> - This
|
||
course by Bruno Simon will teach you the secrets to create the coolest
|
||
WebGL websites with Three.js whether you are a beginner or an advanced
|
||
developer.</li>
|
||
<li><a
|
||
href="https://pikuma.com/courses/learn-3d-computer-graphics-programming">3D
|
||
Computer Graphics Programming</a> - Learn all the theory and the math
|
||
behind 3D graphics while creating a software renderer from scratch using
|
||
the C programming language</li>
|
||
</ul>
|
||
<h2 id="tools">Tools</h2>
|
||
<h3 id="frameworks-libraries-ecosystems">Frameworks • Libraries •
|
||
Ecosystems</h3>
|
||
<ul>
|
||
<li><a href="https://processing.org">Processing</a> [Cross-platform] -
|
||
Computer programming language and IDE for visual arts.</li>
|
||
<li><a href="https://py5coding.org">py5</a> [Cross-platform] - A library
|
||
that integrates Processing into the Python 3 ecosystem.</li>
|
||
<li><a href="https://libcinder.org/">Cinder</a> [Cross-platform] - Open
|
||
source library for professional-quality creative coding in C++.</li>
|
||
<li><a href="https://openframeworks.cc/">openFrameworks</a>
|
||
[Cross-platform] - Open source C++ toolkit for creative coding.</li>
|
||
<li><a href="https://nap-framework.tech/">NAP</a> [Cross-platform] -
|
||
Open source data-driven real-time control & visualization platform
|
||
suited for professional installations in C++, incl. Vulkan
|
||
renderer.</li>
|
||
<li><a href="https://www.c4ios.com">C4</a> [iOS] - Open-source creative
|
||
coding framework for iOS.</li>
|
||
<li><a href="https://unity3d.com/">Unity</a> [Mac, Win] - Game engine,
|
||
but useful for creative coding and installations.</li>
|
||
<li><a href="https://godotengine.org">Godot</a> [Cross-platform] - Open
|
||
source game engine, that can also be used for all sorts of things.</li>
|
||
<li><a href="https://playcanvas.com/">PlayCanvas</a> [Cross-platform] -
|
||
Open source, realtime collaborative WebGL engine.</li>
|
||
<li><a href="https://mercury.sexy/hg_sdf/">hg_sdf</a> [Cross-platform] -
|
||
GLSL library for building signed distance functions.</li>
|
||
<li><a href="https://nannou.cc/">nannou</a> [Cross-platform] -
|
||
Open-source creative coding framework for the Rust language.</li>
|
||
<li><a href="https://thi.ng/">thi.ng</a> [Cross-platform] - Open source
|
||
collection of computational design tools for JavaScript, TypeScript,
|
||
Clojure and ClojureScript languages.</li>
|
||
<li><a href="https://github.com/heestand-xyz/PixelKit">PixelKit</a>
|
||
[iOS, Mac] - Open source, live graphics, Swift framework, powered by
|
||
Metal.</li>
|
||
<li><a href="https://openrndr.org/">OPENRNDR</a> [Cross-platform] - Open
|
||
source library for creative coding written in Kotlin.</li>
|
||
<li><a href="https://phaser.io/">Phaser</a> [Cross-platform] - HTML5
|
||
framework for building games, uses both a Canvas and WebGL
|
||
renderer.</li>
|
||
<li><a
|
||
href="https://github.com/mattdesl/canvas-sketch">Canvas-sketch</a>
|
||
[Cross-platform] - HTML5 framework for making generative artwork in
|
||
JavaScript and the browser.</li>
|
||
<li><a
|
||
href="https://github.com/heestand-xyz/AsyncGraphics">AsyncGraphics</a>
|
||
[iOS, macOS] - Open source, live graphics, async / await, Swift package,
|
||
powered by Metal.</li>
|
||
<li><a href="https://github.com/patriciogonzalezvivo/lygia">Lygia</a>
|
||
[Cross-platform] - Granular and multi-language (GLSL, HLSL, WGSL, MSL
|
||
and CUDA) shader library designed for performance and flexibility.</li>
|
||
<li><a
|
||
href="https://github.com/raphaelameaume/fragment">Fragment.tools</a>
|
||
[Cross-platform] - A web development environment for creative
|
||
coding.</li>
|
||
</ul>
|
||
<h3 id="visual-programming-languages">Visual Programming Languages</h3>
|
||
<ul>
|
||
<li><a href="https://visualprogramming.net/">vvvv</a> [Win] - Hybrid
|
||
visual/textual live-programming environment for easy prototyping and
|
||
development.</li>
|
||
<li><a href="https://www.nodebox.net/node/">NodeBox</a> [Mac, Win] -
|
||
Cross-platform, node-based GUI for efficient data visualizations and
|
||
generative design.</li>
|
||
<li><a href="https://www.derivative.ca/">TouchDesigner</a> [Mac, Win] -
|
||
Visual development platform to create realtime projects.</li>
|
||
<li><a
|
||
href="https://developer.apple.com/library/content/documentation/GraphicsImaging/Conceptual/QuartzComposerUserGuide/qc_intro/qc_intro.html">Quartz
|
||
Composer</a> [Mac] - Development tool for processing and rendering
|
||
graphical data.</li>
|
||
<li><a href="https://vuo.org/">Vuo</a> [Mac] - Live interactive-media
|
||
programming environment.</li>
|
||
<li><a href="https://cycling74.com/products/max/">Max</a> [Mac, Win] -
|
||
Visual programming language for media.</li>
|
||
<li><a href="https://puredata.info/">Pure Data</a> [Cross-platform] -
|
||
Open source visual programming language for multimedia.</li>
|
||
<li><a href="https://ossia.io">ossia score</a> [Cross-platform] -
|
||
Interactive, intermedia audio-visual sequencer.</li>
|
||
<li><a href="https://tooll.io/">tooll</a> [Win] - Open source tool for
|
||
creating interactive 3d content and animations.</li>
|
||
<li><a href="https://xod.io/">XOD</a> [Cross-platform] - Open source
|
||
visual programming language and environment for microcontroller-based
|
||
projects.</li>
|
||
<li><a href="https://troikatronix.com">Isadora</a> [Cross-platform] -
|
||
Scene based media control software with integrated projection
|
||
mapper.</li>
|
||
<li><a href="https://cables.gl">cables</a> [Cross-platform/Web] - Your
|
||
model kit for creating beautiful interactive content. Currently in
|
||
private beta, invites can be requested.</li>
|
||
<li><a href="https://github.com/kousun12/eternal">eternal</a> [Web] -
|
||
Programs as graphs and graphs as compositional tools for creation</li>
|
||
<li><a href="https://www.notch.one">Notch Builder</a> [Win] - Node-based
|
||
authoring tool with a strong focus on real-time graphics. Currently in
|
||
beta.</li>
|
||
<li><a href="https://ncase.me/joy/">JOY.JS</a> - Realtime visual coding
|
||
tool, easy to understand and aimed at beginners.</li>
|
||
<li><a href="https://circles.software">Circles</a> [iPhone, iPad, Mac] -
|
||
Live graphics node editor, powered by AsyncGraphics.</li>
|
||
<li><a href="https://tic80.com/">TIC-80</a> - Make pixel art style games
|
||
and art on a 240*136 pixel screen.</li>
|
||
</ul>
|
||
<h3 id="sound-programming-languages">Sound Programming Languages</h3>
|
||
<ul>
|
||
<li><a href="https://supercollider.github.io/">SuperCollider</a>
|
||
[Multi-platform] - Platform for audio synthesis and algorithmic
|
||
composition.</li>
|
||
<li><a href="https://chuck.cs.princeton.edu/">ChucK</a> -
|
||
Strongly-timed, concurrent, and on-the-fly music programming
|
||
language.</li>
|
||
<li><a href="https://tidalcycles.org/">TidalCycles</a> - Domain specific
|
||
language for live coding of pattern.</li>
|
||
<li><a href="https://sonic-pi.net/">Sonic Pi</a> - The live coding music
|
||
synth for everyone.</li>
|
||
<li><a href="https://csound.com/">Csound</a> - A sound and music
|
||
computing system.</li>
|
||
<li><a href="https://100r.co/site/orca.html">Orca</a> - Live coding
|
||
environment to quickly create procedural sequencers.</li>
|
||
<li><a href="https://handel-pl.github.io/">handel</a> - A small
|
||
procedural programming language for writing songs in browser.</li>
|
||
<li><a href="https://overtone.github.io/">Overtone</a> - An open source
|
||
audio environment designed to explore new musical ideas from synthesis
|
||
and instrument building to live-coding.</li>
|
||
<li><a href="https://melrōse.org/">Melrōse</a> - A MIDI producing
|
||
environment for creating (live) music.</li>
|
||
<li><a href="https://glicol.org">Glicol</a> - Graph-oriented live coding
|
||
language and music/audio DSP library written in Rust.</li>
|
||
</ul>
|
||
<h3 id="web-programming-libraries">Web Programming • Libraries</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/mrdoob/three.js/">three.js</a> -
|
||
JavaScript 3D library.</li>
|
||
<li><a href="https://github.com/regl-project/regl">regl</a> - Functional
|
||
WebGL.</li>
|
||
<li><a href="https://stack.gl/">Stackgl</a> - Open software ecosystem
|
||
for WebGL, built on top of browserify and npm.</li>
|
||
<li><a href="https://paperjs.org/">Paper.js</a> - The swiss army knife
|
||
of vector graphics scripting.</li>
|
||
<li><a href="https://www.pixijs.com/">Pixi.js</a> - HTML 5 2D rendering
|
||
engine that uses webGL with canvas fallback.</li>
|
||
<li><a href="https://p5js.org/">p5.js</a> - JavaScript library that
|
||
starts with the original goal of Processing.</li>
|
||
<li><a href="https://ptsjs.org/">Pts.js</a> - JavaScript library for
|
||
visualization and creative-coding.</li>
|
||
<li><a href="https://fabricjs.com/">Fabric.js</a> - JavaScript canvas
|
||
library, SVG-to-canvas parser.</li>
|
||
<li><a href="https://maker.js.org">Maker.js</a> - Parametric line
|
||
drawing for SVG, CNC & laser cutters.</li>
|
||
<li><a href="https://openjscad.org">OpenJSCAD</a> - Programmatic 3D
|
||
modeling in JavaScript.</li>
|
||
<li><a href="https://soulwire.github.io/sketch.js/">Sketch.js</a> -
|
||
Minimal JavaScript creative coding framework.</li>
|
||
<li><a href="https://two.js.org/">Two.js</a> - Two-dimensional drawing
|
||
api geared towards modern web browsers.</li>
|
||
<li><a href="https://github.com/evanw/lightgl.js">lightgl.js</a> - A
|
||
lightweight WebGL library.</li>
|
||
<li><a href="https://github.com/tsherif/picogl.js">picogl.js</a> - A
|
||
minimal WebGL 2 rendering library.</li>
|
||
<li><a href="https://github.com/yiwenl/Alfrid">Alfrid</a> - A WebGL tool
|
||
set.</li>
|
||
<li><a href="https://github.com/BabylonJS/Babylon.js">Babylon.js</a> -
|
||
complete JavaScript framework for building 3D games with HTML 5 and
|
||
WebGL.</li>
|
||
<li><a href="https://github.com/greggman/twgl.js">twigl</a> - A Tiny
|
||
WebGL helper Library.</li>
|
||
<li><a href="https://github.com/uber/luma.gl">luma.gl</a> - WebGL2
|
||
Components for Data Visualization.</li>
|
||
<li><a href="https://css-doodle.com/">css-doodle</a> - A web component
|
||
for drawing patterns with CSS.</li>
|
||
<li><a href="https://github.com/oframe/ogl">OGL.js</a> - JavaScript 3D
|
||
library (WebGL).</li>
|
||
<li><a href="https://zzz.dog/">Zdog</a> - A pseudo-3D engine for canvas
|
||
& SVG.</li>
|
||
<li><a href="https://github.com/lo-th/Oimo.js/">Oimo.js</a> -
|
||
Lightweight 3d physics engine for javascript</li>
|
||
<li><a href="https://github.com/kripken/ammo.js/">Ammo.js</a> - Direct
|
||
port of the Bullet physics engine to JavaScript using Emscripten.</li>
|
||
<li><a href="https://github.com/ariaminaei/theatre">Theatre.js</a> -
|
||
Motion design library with visual tools</li>
|
||
</ul>
|
||
<h3 id="projection-mapping-vjing">Projection Mapping • VJing</h3>
|
||
<ul>
|
||
<li><a href="http://www.madmapper.com/">MadMapper</a> [Mac] - Video
|
||
mapping projections and Light mapping.</li>
|
||
<li><a href="https://vidvox.net/">VDMX</a> [Mac] - Realtime multimedia
|
||
performance application.</li>
|
||
<li><a href="http://www.modul8.ch/">Modul8</a> [Mac] - Real time video
|
||
mixing and compositing.</li>
|
||
<li><a href="https://resolume.com/">Resolume</a> [Mac, Win] - Mixing of
|
||
digital video and effects in a realtime.</li>
|
||
<li><a href="http://imimot.com/cogevj/">CoGe VJ</a> [Mac] - VJ software
|
||
designed for realtime HD video mixing and compositing with a modular
|
||
user interface.</li>
|
||
<li><a href="https://github.com/baku89/VirtualMapper">VirtualMapper</a>
|
||
- Realtime preview tool for projection mapping.</li>
|
||
<li><a href="https://www.millumin.com/v3/index.php">Millumin</a> [Mac] -
|
||
A software to create and perform interactive audiovisual shows.</li>
|
||
<li><a href="https://smode.fr/">Smode</a> [Win] - A real-time 2D/3D
|
||
creation, compositing and video-mapping engine.</li>
|
||
<li><a href="http://veejayhq.net/">Veejay</a> [Linux] - A live
|
||
performance tool featuring simple non-linear editing and mixing from
|
||
multiple sources (files, devices, streams…)</li>
|
||
</ul>
|
||
<h3 id="online">Online</h3>
|
||
<ul>
|
||
<li><a href="https://www.shadertoy.com/">Shadertoy</a> - Build and share
|
||
shaders with the world and get inspired.</li>
|
||
<li><a href="https://shaderpark.com/">Shader Park</a> - A JavaScript
|
||
library for creating interactive procedural 2D and 3D shaders.</li>
|
||
<li><a href="http://glslsandbox.com/">GLSL Sandbox</a> - Online shader
|
||
editor and gallery.</li>
|
||
<li><a href="http://shdr.bkcore.com/">Shdr Editor</a> - Online shader
|
||
editor.</li>
|
||
<li><a href="http://codepen.io/">CodePen</a> - Show case of advanced
|
||
techniques with editable source code.</li>
|
||
<li><a href="http://www.cdglabs.org/Shadershop/">Shadershop</a> -
|
||
Interface for programming GPU shaders.</li>
|
||
<li><a href="https://www.vertexshaderart.com/">Vertexshaderart</a> -
|
||
Online shader editor and gallery.</li>
|
||
<li><a href="http://cyos.babylonjs.com/">Cyos</a> - Online shader
|
||
editor.</li>
|
||
<li><a href="http://editor.thebookofshaders.com/">GlslEditor</a> -
|
||
Simple WebGL Fragment Shader Editor.</li>
|
||
<li><a href="https://www.openprocessing.org/">OpenProcessing</a> -
|
||
Algorithmic Designs Created with Processing, p5js and processingjs.</li>
|
||
<li><a href="https://editor.p5js.org/">P5.js Editor</a> - Online web
|
||
editor for P5.js.</li>
|
||
<li><a href="http://livecodelab.net">LiveCodeLab</a> - Run-as-you-type
|
||
tool for VJs, musicians, teachers, students, kids.</li>
|
||
<li><a href="https://turtletoy.net/">Turtletoy</a> - Minimalistic API
|
||
and online showcase for generative code. (JavaScript)</li>
|
||
<li><a href="https://shadergif.com/">ShaderGif</a> - Open source home
|
||
for art made with code (WebGL1/2, JavaScript Canvas & P5.js).</li>
|
||
<li><a href="https://teddavis.org/p5live/">P5LIVE</a> - p5.js
|
||
live-coding environment.</li>
|
||
<li><a href="https://neort.io/popular">NEORT</a> - Digital art platform
|
||
for creative coders (Fragment Shader, JavaScript Canvas).</li>
|
||
<li><a href="https://shelly.dev/">Shelly</a> - Learn programming by
|
||
issuing instructions to a turtle.</li>
|
||
<li><a href="https://tixy.land/">tixy.land</a> - The most minimalist
|
||
creative coding environment is alive.</li>
|
||
<li><a href="https://www.bbcmicrobot.com/">BBC Micro bot</a> - Run your
|
||
tweet on an 8-bit computer emulator.</li>
|
||
<li><a href="https://hydra.ojack.xyz/">Hydra</a> - Live code-able video
|
||
synth and coding environment.</li>
|
||
</ul>
|
||
<h3 id="hardware">Hardware</h3>
|
||
<ul>
|
||
<li><a href="https://www.arduino.cc/">Arduino</a> - Open source
|
||
microcontroller kits for building digital devices and interactive
|
||
objects.</li>
|
||
<li><a href="https://www.raspberrypi.org/">Raspberry Pi</a> - Small
|
||
single-board computers.</li>
|
||
<li><a href="https://www.puck-js.com/">Puck.js</a> - Open source
|
||
JavaScript microcontroller you can program wirelessly.</li>
|
||
<li><a href="http://beagleboard.org/">BeagleBoard</a> - Low-power open
|
||
source single-board computers.</li>
|
||
<li><a href="http://www.makeymakey.com/">Makey Makey</a> - Turn everyday
|
||
objects into touchpads and combine them with the internet.</li>
|
||
<li><a href="https://www.leapmotion.com/">Leap Motion</a> - Sensor
|
||
device that supports hand and finger motions as input.</li>
|
||
<li><a href="https://www.axidraw.com/">AxiDraw</a> - Simple, modern, and
|
||
precise pen plotter.</li>
|
||
<li><a href="https://www.phidgets.com">Phidgets</a> - Sensors, input
|
||
devices and controllers for computers.</li>
|
||
<li><a href="https://www.pjrc.com/teensy/">Teensy</a> - USB-based
|
||
microcontroller development system.</li>
|
||
<li><a href="https://lightform.com/">Lightform</a> - AR projection
|
||
mapping with built-in depth sensor.</li>
|
||
</ul>
|
||
<h3 id="other">Other</h3>
|
||
<ul>
|
||
<li><a href="http://structuresynth.sourceforge.net/">Structure Synth</a>
|
||
[Cross-platform] - Application for generating 3D structures by
|
||
specifying a design grammar.</li>
|
||
<li><a href="http://www.syedrezaali.com/f3-mac-app/">F3</a> [Mac] -
|
||
Powerful 3D design app that enables you to live code 3D form.</li>
|
||
<li><a href="https://github.com/rezaali/fragment">Fragment</a> [Mac]-
|
||
App to live code GLSL graphics.</li>
|
||
<li><a href="http://store.steampowered.com/app/314720/">ShaderTool</a>
|
||
[Win] - Modern shader IDE for programmers and FX artists.</li>
|
||
<li><a href="http://syphon.v002.info/">Syphon</a> [Mac] - Allows
|
||
applications to share frames with one another in realtime.</li>
|
||
<li><a href="https://hexler.net/software/kodelife">KodeLife</a> -
|
||
Real-time GPU shader editor, live-code performance tool and graphics
|
||
prototyping sketchpad.</li>
|
||
<li><a href="https://www.interactiveshaderformat.com/">ISF</a> - GLSL
|
||
shaders for use in interactive applications.</li>
|
||
<li><a
|
||
href="http://patriciogonzalezvivo.com/2015/glslViewer/">glslViewer</a> -
|
||
Live-coding console tool that renders GLSL Shaders.</li>
|
||
<li><a href="http://www.shoebot.net/">shoebot</a> [Cross-platform] -
|
||
Shoebot is a creative coding environment designed for making vector
|
||
graphics and animations with Python.</li>
|
||
<li><a href="http://www.drawbot.com/">DrawBot</a> [Mac] - Education
|
||
oriented 2d graphics programming environment based on Python.</li>
|
||
<li><a href="https://github.com/keijiro/Klak">Klak</a> - A collection of
|
||
scripts for creative coding with Unity.</li>
|
||
<li><a href="https://basiljs.ch/">basil.js</a> - Scripting (JS) in
|
||
InDesign for designers and artists in the spirit of Processing.</li>
|
||
<li><a href="https://github.com/MarcelMue/konstrukt">Konstrukt</a>
|
||
[Cross-platform] - A commandline tool to generate different scalable
|
||
patterns as SVGs.</li>
|
||
</ul>
|
||
<h2 id="learning-resources">Learning Resources</h2>
|
||
<h3 id="videos">Videos</h3>
|
||
<ul>
|
||
<li><a href="https://www.youtube.com/user/shiffman">The Coding Train</a>
|
||
- Daniel Shiffman makes videos about creative coding.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLW3Zl3wyJwWMpFSRpeMmSBGDShbkiV1Cq">MFGD
|
||
- Fragment Shaders</a> - YouTube playlist about fragment shaders.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/channel/UCDk9-aPr8zQzwi4ylnuoJ6w">Shaders
|
||
Laboratory</a> - YouTube channel about shaders.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/channel/UCEklP9iLcpExB8vp_fWQseg">Makin’
|
||
Stuff Look Good</a> - YouTube channel about shaders case studies.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=dwt2NAd1ZYY&list=PL4neAtv21WOlqpDzGqbGM_WN2hc5ZaVv7">openFrameworks
|
||
Tutorial Series</a> - YouTube series to learning openFrameworks</li>
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=IKSTo_0pB28&index=51&list=PL4neAtv21WOmrV8z9rSzL20QpdLU1zJLr">openFrameworks
|
||
tutorial</a> - YouTube playlist about openFrameworks - not updated
|
||
[2015].</li>
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=HIvNePu7UEE&list=PL4neAtv21WOmIrTrkNO3xCyrxg4LKkrF7">Shader
|
||
Tutorial Series</a> - YouTube playlist about Shaders, using Visual
|
||
Studio Code.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=5Uxht76ODtQ&list=PL4neAtv21WOmmR5mKb7TQvEQHpMh1h0po">Kha
|
||
Tutorial Series</a> - YouTube playlist about the Kha framework, built in
|
||
Haxe.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=LtFujAtKM5I&list=PLMinhigDWz6emRKVkVIEAaePW7vtIkaIF">Fun
|
||
with WebGL 2.0</a> - YouTube playlist about WebGL 2.0.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLRtjMdoYXLf6zUMDJVRZYV-6g6n62vet8">Modern
|
||
OpenGL 3.0+ Tutorials</a> - YouTube playlist about modern OpenGL.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/channel/UC6IqL5vkMJpqBG_bFDjsaxw">Vertexshaderart</a>
|
||
- YouTube playlist about vertex shaders.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PL08jItIqOb2qyMOhtEUoLh100KpccQiRf">Diving
|
||
in Three.js</a> - YouTube playlist diving into three.js.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=u5HAYVHsasc&list=PLGmrMu-IwbguU_nY2egTFmlg691DN7uE5">Shadertoy
|
||
Tutorials</a> - YouTube playlist teaching you how to make shaders,
|
||
starting with zero knowledge using shadertoy.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLxaZqnd-OQM7Y0lfe7h2cjlQAm5O9_6UL">WebGL
|
||
Lighting</a> - Introduction to WebGL lighting with Greg Tatum.</li>
|
||
</ul>
|
||
<h3 id="talks">Talks</h3>
|
||
<ul>
|
||
<li><a href="https://iquilezles.org/live/">Inigo Quilez Live</a> -
|
||
Collection of live coding videos by Íñigo Quílez.</li>
|
||
<li><a href="https://slideslive.com/38898318/there-is-also-canvas">There
|
||
is also canvas</a> - Bruno Imbrizi go through the use of canvas for
|
||
creative coding at WebExpo 2016. Interactive slides <a
|
||
href="https://brunoimbrizi.github.io/webexpo-2016/dist/">here</a>.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLRIWtICgwaX0u7Rf9zkZhLoLuZVfUksDP">OpenGL
|
||
3D Game Tutorials</a> - Beginners tutorial series about creating 3D
|
||
games OpenG.</li>
|
||
<li><a href="http://how-we-do-this-shit.com/">How We Do This Shit</a> -
|
||
Talk on how tech-based artists do this financially.</li>
|
||
<li><a
|
||
href="http://acko.net/files/fullfrontal/fullfrontal/webglmath/online.html">Making
|
||
WebGL Dance</a> - How I Learnt to Stop Worrying and Love Linear
|
||
Algebra.</li>
|
||
<li><a href="http://acko.net/files/gltalks/pixelfactory/online.html">The
|
||
Pixel Factory</a> - Talk about WebGL, GPUs and Math by Steven
|
||
Wittens.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=bmztlO9_Wvo&t=387s">Poetic
|
||
Computation</a> - Inspiring talk by Zach Lieberman.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=8Uo6zFwSO78">Generative
|
||
Machines</a> - FITC talk by Matt DesLauriers about his passion for
|
||
generative art.</li>
|
||
</ul>
|
||
<h3 id="articles-tutorials">Articles • Tutorials</h3>
|
||
<h4 id="shaders-opengl-webgl">Shaders • OpenGL • WebGL</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://aerotwist.com/tutorials/an-introduction-to-shaders-part-1/">Introduction
|
||
to shaders</a> - Part 1 of an introduction to shaders using
|
||
threejs.</li>
|
||
<li><a
|
||
href="https://medium.com/@necsoft/three-js-101-hello-world-part-1-443207b1ebe1">Three.js
|
||
101</a> - Introduction to three.js from a creative coder
|
||
perspective.</li>
|
||
<li><a
|
||
href="https://github.com/mattdesl/lwjgl-basics/wiki/Shaders">lwjgl:
|
||
Shaders</a> - Shader tutorial in the context of lwjgl-basics.</li>
|
||
<li><a
|
||
href="https://notes.underscorediscovery.com/shaders-a-primer/">Shaders:
|
||
A primer</a> - A primer on shaders.</li>
|
||
<li><a
|
||
href="https://notes.underscorediscovery.com/shaders-second-stage/">Shaders:
|
||
Second stage</a> - The second part to the previous.</li>
|
||
<li><a
|
||
href="https://github.com/Jam3/jam3-lesson-webgl-shader-intro">WebGL
|
||
Lessons — Fragment Shaders</a> - A brief introduction to fragment
|
||
shaders.</li>
|
||
<li><a
|
||
href="https://github.com/Jam3/jam3-lesson-webgl-shader-threejs">WebGL
|
||
Lessons — ThreeJS Shaders</a> - Using custom vertex and fragment shaders
|
||
in ThreeJS.</li>
|
||
<li><a
|
||
href="https://github.com/Jam3/threejs-post-process-example">ThreeJS
|
||
post-process example</a> - example of post-processing effects in
|
||
ThreeJS.</li>
|
||
<li><a
|
||
href="https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-ray-tracing/how-does-it-work.html">Ray
|
||
Marching and Signed Distance Functions</a> - Introduction to ray
|
||
tracing.</li>
|
||
<li><a
|
||
href="http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/">Introduction
|
||
to Ray Tracing</a> - A simple method for creating 3D images.</li>
|
||
<li><a href="https://github.com/stackgl/glsl-lighting-walkthrough">GLSL
|
||
lighting walkthrough</a> - Phong shading tutorial with glslify.</li>
|
||
<li><a href="https://github.com/mattdesl/three-glslify-example">Three
|
||
glslify example</a> - Example on how to use three.js with glslify.</li>
|
||
<li><a href="https://github.com/gregtatum/talk-webgl-beyond-dom">WebGL
|
||
Beyond Dom</a> - Greg Tatum explains the basics of WebGL using
|
||
Regl.</li>
|
||
<li><a href="http://barradeau.com/blog/?p=621">FBO particles</a> -
|
||
Article about FBO/GPGPU particles by <span class="citation"
|
||
data-cites="nicoptere">@nicoptere</span>.</li>
|
||
<li><a href="http://barradeau.com/blog/?p=575">Ray marching (with
|
||
THREE.js)</a> - Article about ray marching with three.js by <span
|
||
class="citation" data-cites="nicoptere">@nicoptere</span>.</li>
|
||
<li><a
|
||
href="https://csantosbh.wordpress.com/2014/01/09/custom-shaders-with-three-js-uniforms-textures-and-lighting/">Custom
|
||
shaders with Three.JS</a> - Introduction to custom shaders, uniforms,
|
||
textures and lighting in three.js.</li>
|
||
<li><a
|
||
href="http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Chapter-1:-The-Graphics-Pipeline.html">An
|
||
intro to modern OpenGL</a> - First part of an introduction to modern
|
||
OpenGL.</li>
|
||
<li><a href="https://github.com/tomdalling/opengl-series">Modern OpenGL
|
||
Series</a> - Good introduction to some of the OpenGL terms.</li>
|
||
<li><a href="https://iquilezles.org/www/articles/smin/smin.htm">Smooth
|
||
minimum</a> - Article about the smooth based primitive union.</li>
|
||
<li><a
|
||
href="https://iquilezles.org/www/articles/distfunctions/distfunctions.htm">Modeling
|
||
with distance functions</a> - Collection of distance functions in one
|
||
centralized place.</li>
|
||
<li><a
|
||
href="http://www.alanzucconi.com/2016/07/01/volumetric-rendering/">Volumetric
|
||
rendering</a> - Explains how to create complex 3D shapes inside
|
||
volumetric shaders.</li>
|
||
<li><a href="http://www.realtimerendering.com/">Real-time Rendering</a>
|
||
- Book, blog and collection of resources regarding real-time
|
||
rendering.</li>
|
||
<li><a href="http://antongerdelan.net/opengl/shaders.html">OpenGL 4
|
||
Shaders</a> - Short and sweet introduction to OpenGL shaders by Anton
|
||
Gerdelan.</li>
|
||
<li><a
|
||
href="http://www.hugi.scene.org/online/hugi37/hugi%2037%20-%20coding%20adok%20on%20ray%20casting,%20ray%20tracing,%20ray%20marching%20and%20the%20like.htm">On
|
||
ray casting, ray tracing, ray marching and the like</a> - The title says
|
||
it all. Introduction by Adok.</li>
|
||
<li><a
|
||
href="http://blog.simonrodriguez.fr/articles/18-02-2017_writing_a_small_software_renderer.html">Writing
|
||
a small software renderer</a> - Really good introduction to how basic
|
||
software rendering works.</li>
|
||
<li><a href="http://www.webgltutorials.org/">WebGL Tutorials</a> -
|
||
Website with a really good collection of WebGL tutorials.</li>
|
||
<li><a
|
||
href="http://codepen.io/mcdorli/post/generating-geometry-part-1-basics">Generating
|
||
Geometry: 1</a>, <a
|
||
href="http://codepen.io/mcdorli/post/generating-geometry-part-2-going-3d">2</a>,
|
||
<a
|
||
href="http://codepen.io/mcdorli/post/generating-geometry-part-3-getting-spherical">3</a>
|
||
- Beginner introduction on how to create geometry object.</li>
|
||
<li><a
|
||
href="https://medium.com/@Zadvorsky/into-vertex-shaders-594e6d8cd804">Into
|
||
Vertex Shaders</a> - Series of tutorials about WebGL, Three.js, and
|
||
Three.bas.</li>
|
||
<li><a
|
||
href="https://medium.com/@Zadvorsky/into-vertex-shaders-part-1-the-spaces-of-webgl-c70ded527841">The
|
||
Spaces of WebGL</a> - Brief overview over the different coordinate
|
||
systems throughout the 3D graphics pipeline.</li>
|
||
<li><a href="http://webgl-workshop.com/">WebGL Workshop</a> - Short and
|
||
sweet online introduction to WebGL.</li>
|
||
<li><a href="http://barradeau.com/blog/?p=1109">THREE.js & instanced
|
||
geometry</a> - Fluffy predator with three.js and instanced
|
||
geometry.</li>
|
||
<li><a
|
||
href="http://www.chinedufn.com/webgl-particle-effect-billboard-tutorial/">Particle
|
||
Effects via Billboards</a> - How to create a particle effects with
|
||
billboarding and WebGL.</li>
|
||
<li><a
|
||
href="https://peterbeshai.com/beautifully-animate-points-with-webgl-and-regl.html">Beautifully
|
||
Animate Points with WebGL and regl</a> - How to create GPGPU particles
|
||
with regl.</li>
|
||
<li><a
|
||
href="https://www.chinedufn.com/webgl-shadow-mapping-tutorial/">WebGL
|
||
Tutorial: Directional Shadow Mapping without extensions</a> -
|
||
Introduction to the concepts behind real time directional light shadow
|
||
mapping.</li>
|
||
<li><a href="http://xem.github.io/articles/#webgl_quest_2">WebGL
|
||
Quest</a> - A tutorial and a list of useful resources to use WebGL
|
||
raymarching and distance functions easily.</li>
|
||
<li><a
|
||
href="http://apoorvaj.io/exploring-bump-mapping-with-webgl.html">Exploring
|
||
bump mapping with WebGL</a> - Introduction to different bump mapping
|
||
techniques.</li>
|
||
<li><a
|
||
href="http://web.cse.ohio-state.edu/~wang.3602/courses/cse5542-2013-spring/13-GLSL.pdf">OpenGL/GLSL
|
||
Shader Programming</a> - Deck on OpenGL/GLSL shader programming.</li>
|
||
<li><a
|
||
href="https://codepen.io/DonKarlssonSan/post/particles-in-simplex-noise-flow-field">Particles
|
||
in a Simplex Noise Flow Field</a> - Perlin noise flow field
|
||
tutorial.</li>
|
||
<li><a
|
||
href="https://medium.com/@bit101/flow-fields-part-i-3ebebc688fd8">Flow
|
||
Fields, Part 1</a> - Introduction to flow fields also known as vector
|
||
fields.</li>
|
||
<li><a
|
||
href="https://medium.com/@bit101/flow-fields-part-ii-f3c24c1b777d">Flow
|
||
Fields, Part 2</a> - Introduction to flow fields also known as vector
|
||
fields.</li>
|
||
<li><a
|
||
href="https://research.ncl.ac.uk/game/mastersdegree/graphicsforgames/">Graphics
|
||
for Games</a> - Introduction to 3D graphics programming including
|
||
shaders, math post-processing etc. from Newcastle University.</li>
|
||
<li><a href="http://www.realtimerendering.com/basics3js/#1">Three.js
|
||
Basics</a> - Introduction to Three.js by Eric Haines.</li>
|
||
<li><a
|
||
href="https://www.cs.unm.edu/~angel/SIGGRAPH17/COURSE/s17_final.pdf">An
|
||
Interactive Introduction to WebGL and three.js</a> - Slides from the
|
||
SIGGRAPH 2017 WebGL workshop.</li>
|
||
<li><a
|
||
href="https://erkaman.github.io/posts/beginner_computer_graphics.html">How
|
||
to Start Learning Computer Graphics Programming</a> - Advice and
|
||
thoughts on how to get started by Eric Arnebäck.</li>
|
||
<li><a
|
||
href="http://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-about-gamma/">What
|
||
Every Coder Should Know About Gamma</a> - Deep dive into the importance
|
||
of gamma.</li>
|
||
</ul>
|
||
<h4 id="canvas">Canvas</h4>
|
||
<ul>
|
||
<li><a
|
||
href="http://joshondesign.com/p/books/canvasdeepdive/toc.html">HTML
|
||
Canvas Deep Dive</a> - Profound introduction to the canvas API.</li>
|
||
<li><a
|
||
href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31
|
||
days of Canvas tutorials</a> - Collection of canvas tutorials by Seb
|
||
Lee-Delisle.</li>
|
||
</ul>
|
||
<h4 id="hardware-1">Hardware</h4>
|
||
<ul>
|
||
<li><a href="https://mattdesl.svbtle.com/pen-plotter-1">Pen Plotter Art
|
||
& Algorithms Part 1</a>, <a
|
||
href="https://mattdesl.svbtle.com/pen-plotter-2">2</a> - How to use the
|
||
AxiDraw pen plotter with JavaScript.</li>
|
||
</ul>
|
||
<h4 id="other-1">Other</h4>
|
||
<ul>
|
||
<li><a href="https://varun.ca/noise/">Noise in Creative Coding</a> -
|
||
In-depth blog post about noise as an indispensable tool for creative
|
||
coding.</li>
|
||
<li><a href="http://catlikecoding.com/unity/tutorials/">Cat Like
|
||
Coding</a> - In depth tutorials on math, algorithms and Unity.</li>
|
||
<li><a href="http://funprogramming.org/">Fun Programming</a> - Learn
|
||
creative coding writing simple programs.</li>
|
||
<li><a
|
||
href="http://www.creativeapplications.net/tutorials/creative-coding-on-ios-with-c4-tutorial/">Creative-coding
|
||
on iOS with C4</a> - Introduction to C4 published on Creative
|
||
Applications.</li>
|
||
<li><a href="http://www.c4ios.com/cosmos/">COSMOS</a> - An end-to-end
|
||
tutorial on the design, programming and launch of an app using C4.</li>
|
||
<li><a
|
||
href="https://www.khanacademy.org/partner-content/pixar/effects/particle-physics/a/start-here-fx">Particle
|
||
Physics</a> - Particle physics explained.</li>
|
||
<li><a href="https://bost.ocks.org/mike/algorithms/">Visualizing
|
||
Algorithms</a> - Looks at the use of visualization to understand,
|
||
explain and debug algorithms.</li>
|
||
<li><a href="http://ruh.li/">Adventures in Game Development World</a> -
|
||
Easy to understand collection of articles on game development, but
|
||
relevant to creative coding as well.</li>
|
||
<li><a
|
||
href="http://www-cs-students.stanford.edu/~amitp/gameprog.html">Amit’s
|
||
Game Programming Information</a> - Collection of resources on stuff like
|
||
path-finding, Ai, math etc.</li>
|
||
<li><a
|
||
href="https://tylerxhobbs.com/essays/2018/tips-to-improve-your-generative-artwork">Tips
|
||
to Improve Your Generative Artwork</a> - Tips to make your art look
|
||
better.</li>
|
||
<li><a
|
||
href="https://tylerxhobbs.com/essays/2016/working-with-color-in-generative-art">Working
|
||
With Color in Generative Art</a> - Tips on how to get color right.</li>
|
||
</ul>
|
||
<h3 id="interactive">Interactive</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/stackgl/shader-school">Shader-school</a>
|
||
- Workshop for GLSL shaders and graphics programming.</li>
|
||
<li><a
|
||
href="https://github.com/stackgl/webgl-workshop">Webgl-workshop</a> -
|
||
The sequel to shader-school: Learn the WebGL API.</li>
|
||
<li><a href="http://hughsk.io/fragment-foundry">Fragment-foundry</a> -
|
||
Interactive fragment shader tutorial.</li>
|
||
<li><a href="https://www.shadertoy.com/view/Xl2XWt">SDF Tutorial 1: box
|
||
& balloon</a> - Shadertoy tutorial on raytracing.</li>
|
||
<li><a href="https://www.shadertoy.com/view/XllGW4">HOWTO: Ray
|
||
Marching</a> - Shadertoy tutorial on Ray Marching.</li>
|
||
<li><a href="https://www.shadertoy.com/view/XlBGDW">Raymarch
|
||
Tutorial2</a> - Shadertoy raymarch tutorial.</li>
|
||
<li><a href="https://www.shadertoy.com/view/Md23DV">GLSL 2D
|
||
Tutorials</a> - Shadertoy GLSL 2D Tutorial.</li>
|
||
<li><a href="http://mrl.nyu.edu/~perlin/bubble_breakdown/">Bubble
|
||
Breakdown</a> - Shader breakdown by Perlin.</li>
|
||
<li><a href="https://www.shadertoy.com/view/MdBfRK">Let’s Make A Ray
|
||
Marcher</a> - Interactive Shader-Toy on writing a ray marcher.</li>
|
||
<li><a href="https://www.shadertoy.com/view/4dSfRc">Raymarching</a> -
|
||
Interactive Shader-Toy raymarching tutorial.</li>
|
||
</ul>
|
||
<h3 id="quick-references-cheat-sheets">Quick References • Cheat
|
||
Sheets</h3>
|
||
<ul>
|
||
<li><a href="https://shaderific.com/glsl.html">Shaderific GLSL</a> -
|
||
OpenGL ES shading language reference.</li>
|
||
<li><a href="https://thebookofshaders.com/glossary/">The Book of Shaders
|
||
Glossary</a> - Shader glossary by theme.</li>
|
||
<li><a
|
||
href="https://paroj.github.io/gltut/Basics/Intro%20Glossary.html">gltut
|
||
glossary pages: 1</a>, <a
|
||
href="https://paroj.github.io/gltut/Basics/Tut01%20Glossary.html">2</a>,
|
||
<a
|
||
href="https://paroj.github.io/gltut/Basics/Tut02%20Glossary.html">3</a>,
|
||
<a
|
||
href="https://paroj.github.io/gltut/Positioning/Tut04%20Glossary.html">4</a>,
|
||
<a
|
||
href="https://paroj.github.io/gltut/Positioning/Tut05%20Glossary.html">5</a>,
|
||
<a
|
||
href="https://paroj.github.io/gltut/Positioning/Tut06%20Glossary.html">6</a>,
|
||
<a
|
||
href="https://paroj.github.io/gltut/Positioning/Tut07%20Glossary.html">7</a>,
|
||
<a
|
||
href="https://paroj.github.io/gltut/Positioning/Tut08%20Glossary.html">8</a>
|
||
- OpenGL 3D programming glossary.</li>
|
||
<li><a
|
||
href="https://web.archive.org/web/20171226205420/https://skilled.co/html-canvas/">Canvas
|
||
Cheatsheet</a> - Quick and visual canvas cheatsheet.</li>
|
||
<li><a
|
||
href="https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf">WebGL
|
||
Cheatsheet</a> - WebGL 1.0 API reference card.</li>
|
||
<li><a
|
||
href="https://en.wikipedia.org/wiki/Glossary_of_computer_graphics">Glossary
|
||
of Computer Graphics</a> - Glossary of terms relating computer
|
||
graphics.</li>
|
||
<li><a
|
||
href="http://www.cs.cmu.edu/afs/cs/academic/class/15462-f10/www/lec_slides/glslref.pdf">GLSL
|
||
Reference Guide</a> - OpenGL Shading Language quick reference
|
||
guide.</li>
|
||
<li><a
|
||
href="http://antongerdelan.net/teaching/3dprog1/maths_cheat_sheet.pdf">3D
|
||
Maths Cheat Sheet</a> - Math cheatsheet by Anton Gerdelan, from his
|
||
OpenGL book.</li>
|
||
<li><a href="http://docs.gl/">docs.GL</a> - Improvement of the official
|
||
OpenGL documentation.</li>
|
||
<li><a
|
||
href="https://www.khronos.org/opengl/wiki/OpenGL_Shading_Language">OpenGL
|
||
Shading Language</a> - Khronos Group GLSL wiki.</li>
|
||
<li><a
|
||
href="https://www.khronos.org/files/opengl43-quick-reference-card.pdf">OpenGL
|
||
4.3 Reference Card</a> - PDF Reference Card for the OpenGL 4.3 API.</li>
|
||
<li><a href="http://easings.net/">Easings</a> - Interactive easing
|
||
functions cheatsheet.</li>
|
||
<li><a href="http://pixelspiritdeck.com/">PixelSpirit</a> - GLSL library
|
||
on the back of tarot cards, for learning and reference.</li>
|
||
<li><a
|
||
href="http://www.neilblevins.com/art_lessons/procedural_noise/procedural_noise.html">Procedural
|
||
Patterns And Noises</a> - Collection of procedural patterns and
|
||
procedural noises.</li>
|
||
<li><a href="https://ramesaliyev.com/visual-noises/">Visual Noises</a> -
|
||
Visualize noise algorithms in 1D and 2D.</li>
|
||
<li><a href="https://ramesaliyev.com/trigonoparty/">Trigonoparty</a> -
|
||
Simple trigonometry visualisation.</li>
|
||
<li><a
|
||
href="https://github.com/jasonwebb/morphogenesis-resources">Morphogenesis</a>
|
||
- Exploration of how shapes, forms, and patterns emerge in nature.</li>
|
||
</ul>
|
||
<h2 id="communities">Communities</h2>
|
||
<h3 id="subreddits">Subreddits</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.reddit.com/r/creativecoding/">r/creativecoding</a> -
|
||
Sharing and discussing the use of computer programming as a creative
|
||
discipline.</li>
|
||
<li><a href="https://www.reddit.com/r/raytracing/">r/raytraycing</a> -
|
||
Subreddit on raytracing.</li>
|
||
<li><a href="https://www.reddit.com/r/opengl/">r/opengl</a> - News and
|
||
discussion about OpenGL on all platforms.</li>
|
||
<li><a
|
||
href="https://www.reddit.com/r/GraphicsProgramming/">r/graphicsprogramming</a>
|
||
- Subreddit on graphics programming.</li>
|
||
<li><a href="https://www.reddit.com/r/processing/">r/processing</a> -
|
||
Subreddit on Processing.</li>
|
||
<li><a href="https://www.reddit.com/r/shaders/">r/shaders</a> -
|
||
Subreddit on shaders.</li>
|
||
<li><a
|
||
href="https://www.reddit.com/r/proceduralgeneration/">r/proceduralgeneration</a>
|
||
- Subreddit on procedural generation.</li>
|
||
<li><a
|
||
href="https://www.reddit.com/r/MachineLearning/">r/MachineLearning</a> -
|
||
Subreddit on machine learning.</li>
|
||
<li><a href="https://www.reddit.com/r/generative/">r/generative</a> -
|
||
Subreddit on generative art and music.</li>
|
||
</ul>
|
||
<h3 id="slack">Slack</h3>
|
||
<ul>
|
||
<li><a href="http://creative-coding-club.slack.com/">Creative Coding
|
||
Club</a> - Creative Coding Club Slack.</li>
|
||
</ul>
|
||
<h3 id="other-2">Other</h3>
|
||
<ul>
|
||
<li><a href="http://creativecodingpodcast.com/">The Creative Coding
|
||
Podcast</a> - Iain and Seb discuss the ins and outs of creative
|
||
coding.</li>
|
||
<li><a href="https://realtimevfx.com/">realtimevfx.com</a> - Real Time
|
||
VFX Community.</li>
|
||
<li><a href="http://datastori.es/">Data Stories</a> - Podcast on data
|
||
visualization.</li>
|
||
<li><a href="https://www.3dkingdoms.com/weekly/weekly.php">3D
|
||
Programming Weekly Articles</a> - Great collection of shader and math
|
||
related resources.</li>
|
||
<li><a href="https://spectrum.chat/codepen/pass-the-pen/">Pass The
|
||
Pen</a> - A community of front-end developers who build collaborative
|
||
creative coding projects on CodePen.</li>
|
||
<li><a
|
||
href="https://us19.campaign-archive.com/home/?u=ac884610ba6fe07f4988a2182&id=ad49a755b1">Creative
|
||
Tech Weekly</a> - A weekly newsletter of resources around creative
|
||
technology.</li>
|
||
</ul>
|
||
<h2 id="math">Math</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/Jam3/math-as-code">Math as code</a> -
|
||
Cheat-sheet for mathematical notation in code form.</li>
|
||
<li><a href="https://www.youtube.com/user/codingmath">Coding Math</a> -
|
||
Teaches you the math you need to understand as a programmer.</li>
|
||
<li><a href="https://github.com/terkelg/math">Math snippets</a> - Math
|
||
snippets with graphic programming in mind.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=0ifChJ0nJfM">Formula
|
||
Animations</a> - The principles of painting with maths.</li>
|
||
<li><a href="https://github.com/silviopaganini/maths">Learning Maths
|
||
again</a> - Collection of JS and GLSL math snippets.</li>
|
||
<li><a href="https://github.com/mattdesl/eases">Eases</a> - Grab-bag of
|
||
modular easing equations.</li>
|
||
<li><a href="https://soulwire.co.uk/math-for-motion/">Math for
|
||
Motion</a> - Visualization of different motion equations.</li>
|
||
<li><a href="http://matrixmultiplication.xyz">Matrix Multiplication</a>
|
||
- Matrix multiplication visualized.</li>
|
||
<li><a href="http://algebrarules.com/">Algebra rules</a> - The most
|
||
useful rules of basic algebra.</li>
|
||
<li><a href="http://immersivemath.com/ila/index.html">Immersive Math</a>
|
||
- Fully interactive linear algebra.</li>
|
||
<li><a href="http://setosa.io/ev/image-kernels/">Image Kernels</a> -
|
||
Interactive and visual introduction to image kernels.</li>
|
||
<li><a href="http://setosa.io/ev/sine-and-cosine/">Sine and Cosine</a> -
|
||
Interactive explanation of sine and cosine.</li>
|
||
<li><a href="https://eev.ee/blog/2016/05/29/perlin-noise/">Perlin
|
||
Noise</a> - Perlin noise explained in detail.</li>
|
||
<li><a href="http://programmedlessons.org/VectorLessons/">Vector Math
|
||
for 3D Computer Graphics</a> - Tutorial on vector algebra and matrix
|
||
algebra from the viewpoint of computer graphics.</li>
|
||
<li><a href="https://www.desmos.com/">Desmos</a> - Graph functions, plot
|
||
data, evaluate equations, explore transformations, and much more.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLW3Zl3wyJwWNQjMz941uyOIq3Nw6bcDYC">MFGD</a>
|
||
- Math for game developers YouTube playlist.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLZHQObOWTQDPD3MizzM2xVFitgF8hE_ab">Essence
|
||
of linear algebra</a> - Essence of linear algebra YouTube playlist.</li>
|
||
<li><a
|
||
href="https://winkervsbecks.github.io/mathematics-of-animation/#/">Mathematics
|
||
of Animation</a> - Slides about the mathematics of animation (<a
|
||
href="https://github.com/winkerVSbecks/mathematics-of-animation">repo</a>).</li>
|
||
<li><a href="https://kynd.github.io/p5sketches/index.html">Sketching
|
||
with Math and Quasi Physics</a> - Beautiful and visual introduction to
|
||
math and quasi physics.</li>
|
||
<li><a href="http://genekogan.com/code/p5js-perlin-noise/">Gene Kogan:
|
||
Perlin Noise</a> - introduction to 2D and 3D perlin noise.</li>
|
||
<li><a
|
||
href="https://medium.com/@Zadvorsky/into-vertex-shaders-addendum-1-matrix-math-and-you-565a51094472">Matrix
|
||
Math and You</a> - High level introduction to matrices.</li>
|
||
<li><a
|
||
href="http://www.rapidtables.com/math/symbols/Basic_Math_Symbols.htm">Mathematical
|
||
Symbols</a> - List of all mathematical symbols and signs.</li>
|
||
<li><a href="http://ncase.me/matrix/">The magnificent 2d matrix</a> -
|
||
Interactive tool to better understand transformation matrices.</li>
|
||
<li><a
|
||
href="http://www.somethinghitme.com/2013/11/13/snippets-i-always-forget-movement/">Game
|
||
Dev Movement cheatsheet with examples</a> - JavaScript math snippets for
|
||
movement.</li>
|
||
<li><a
|
||
href="https://gist.github.com/xem/99930986c5333125a13b0ea50600391f">Maths
|
||
& trigonometry cheat sheet for 2D & 3D games</a> - Maths
|
||
cheat-sheet for 2D and 3D game-makers.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=4k9wTfxfkJU&list=PLxaZqnd-OQM7k2Gp3xu02VzExGKMKgqY2">Matrices
|
||
for Creative Coding</a> - Introduction to matrices by Greg Tatum.</li>
|
||
<li><a href="https://acko.net/tv/wdcode/">Making Things With Maths</a> -
|
||
Talk by Steven Wittens about bezier curves, procedural generation,
|
||
physics engines and fractals.</li>
|
||
<li><a href="https://www.myphysicslab.com/">MyPhysicsLab</a> -
|
||
Interactive real-time physics simulations, with formulas and code.</li>
|
||
<li><a href="https://intuitive-math.club/">Intuitive Math</a> -
|
||
Explanations of fields like Linear Algebra and Geometry designed to help
|
||
you develop a visual intuition for what is going on.</li>
|
||
<li><a href="https://github.com/arendsee/lsystems">L-systems</a> - A
|
||
Haskell package for L-systems.</li>
|
||
<li><a href="https://mattdesl.svbtle.com/linear-interpolation">Linear
|
||
Interpolation</a> - Introduction to linear interpolation (also known as
|
||
mix/lerp).</li>
|
||
<li><a
|
||
href="https://www.gamedev.net/articles/programming/math-and-physics/practical-use-of-vector-math-in-games-r2968/">Practical
|
||
use of Vector Math in Games</a> - In-depth article on vectors for game
|
||
math.</li>
|
||
<li><a
|
||
href="https://inconvergent.net/2016/shepherding-random-numbers/">Shepherding
|
||
random numbers</a> - Tiny guide to shepherding random numbers.</li>
|
||
<li><a
|
||
href="https://inconvergent.net/2016/shepherding-random-grids/">Shepherding
|
||
random grids</a> - Tiny guide to shepherding random grids.</li>
|
||
<li><a
|
||
href="https://inconvergent.net/2016/shepherding-random-growth/">Shepherding
|
||
random growth</a> - Tiny guide to shepherding random growth.</li>
|
||
</ul>
|
||
<h2 id="machine-learning-computer-vision-ai">Machine learning • Computer
|
||
Vision • AI</h2>
|
||
<ul>
|
||
<li><a href="https://ml4a.net/">ml4a</a> - Machine learning for
|
||
artists.</li>
|
||
<li><a href="https://transcranial.github.io/keras-js/">Keras.js</a> -
|
||
Run Keras models (tensorflow backend) in the browser, with GPU
|
||
support.</li>
|
||
<li><a href="http://tesseract.projectnaptha.com/">Tesseract.js</a> -
|
||
Pure JavaScript Multilingual OCR.</li>
|
||
<li><a href="https://cloud.google.com/ml/">Google ML</a> - Cloud machine
|
||
learning by Google.</li>
|
||
<li><a href="https://www.tensorflow.org/">TensorFlow</a> - Open source
|
||
software library for machine intelligence.</li>
|
||
<li><a
|
||
href="http://cs.stanford.edu/people/karpathy/convnetjs/started.html">ConvNetJS</a>
|
||
- Deep Learning in your browser.</li>
|
||
<li><a href="http://www.wekinator.org/">Wekinator</a> - Allows anyone to
|
||
use machine learning.</li>
|
||
<li><a href="https://github.com/CodingTrain/Machine-Learning">Machine
|
||
Learning</a> - Coding Train repo with links to machine learning
|
||
resources.</li>
|
||
<li><a href="http://www.creativeai.net/">CreativeAi.net</a> - Space to
|
||
share creative Ai projects.</li>
|
||
<li><a href="http://aiplaybook.a16z.com/">AI Playbook</a> - Ai microsite
|
||
intended to help newcomers get started.</li>
|
||
<li><a
|
||
href="https://github.com/googlecreativelab/teachable-machine">Teachable
|
||
Machine</a> - Explore how machine learning works, live in the
|
||
browser.</li>
|
||
<li><a href="https://js.tensorflow.org/">TensorFlow.js</a> - JavaScript
|
||
library for training and deploying ML models in the browser and on
|
||
Node.js.</li>
|
||
<li><a href="https://hello-tensorflow.glitch.me/">Hello TensorFlow</a> -
|
||
Fully commented TensorFlow.js demo.</li>
|
||
<li><a href="https://ml5js.org/">ml5.js</a> - Friendly machine learning
|
||
for the web.</li>
|
||
<li><a href="https://modelzoo.co/">Model Zoo</a> - Discover open source
|
||
deep learning code and pretrained models.</li>
|
||
<li><a href="https://runwayapp.ai/">Runway</a> - Toolkit that adds
|
||
artificial intelligence capabilities to design and creative
|
||
platforms.</li>
|
||
<li><a href="https://lobe.ai/">Lobe</a> - Build, train, and ship custom
|
||
deep learning models using a simple visual interface.</li>
|
||
<li><a href="https://modeldepot.io/">ModelDepot</a> - Platform for
|
||
discovering, sharing, and discussing easy to use and pre-trained machine
|
||
learning models.</li>
|
||
</ul>
|
||
<h2 id="inspiration">Inspiration</h2>
|
||
<ul>
|
||
<li><a href="https://www.openprocessing.org/">OpenProcessing</a> -
|
||
Algorithmic Designs Created with Processing, p5js and processingjs.</li>
|
||
<li><a href="https://www.dwitter.net/">Dwitter</a> - Social network for
|
||
short JavaScript demos.</li>
|
||
<li><a href="https://www.chromeexperiments.com/">Chrome Experiments</a>
|
||
- Showcase of web experiments written by the creative coding
|
||
community.</li>
|
||
<li><a href="http://fyprocessing.tumblr.com/">For your Processing</a> -
|
||
Projects and tutorials about Processing.</li>
|
||
<li><a href="http://www.artfromcode.com/">Art From Code</a> - Code
|
||
sketches by Keith Peters.</li>
|
||
<li><a href="https://www.flickr.com/groups/generatorx/">Generator.x</a>
|
||
- Flickr group about generative strategies in art & design.</li>
|
||
<li><a href="https://www.flickr.com/groups/generativeart/">Generative
|
||
Art</a> - Flickr group about generative art.</li>
|
||
<li><a
|
||
href="https://github.com/nucliweb/People-You-Should-Follow-on-CodePen">People
|
||
You Should Follow on CodePen</a> - List of interesting people worth
|
||
following.</li>
|
||
<li><a href="https://ravenkwok.tumblr.com/">Raven Kwok</a> - Tumblr by
|
||
visual artist Raven Kwok.</li>
|
||
<li><a href="http://p5art.tumblr.com/">P5Art</a> - Really good
|
||
collection of experiments in Processing.</li>
|
||
<li><a href="http://echophon.tumblr.com/">Echophon</a> - Tumblr with
|
||
visual inspiration.</li>
|
||
<li><a href="https://beesandbombs.tumblr.com/">Bees & Bombs</a> -
|
||
Tumblr with gifs by Dave.</li>
|
||
<li><a href="http://folds2d.tumblr.com/">Folds2d</a> - Tumblr with
|
||
curves, surfaces, scalar and vector fields.</li>
|
||
</ul>
|
||
<h2 id="events">Events</h2>
|
||
<ul>
|
||
<li><a href="http://offf.barcelona/">OFFF Festival</a> - Digital design
|
||
festival (<em>Online Flash Film Festival</em>).</li>
|
||
<li><a href="http://grayareafestival.io/">Gray Area Festival</a> -
|
||
Creative coding, art and technology festival.</li>
|
||
<li><a href="http://www.signalfestival.com/">Signal Festival</a> -
|
||
Showcase of light art and emerging technologies in Prague, the Czech
|
||
Republic.</li>
|
||
<li><a href="http://eyeofestival.com/">Eyeo Festival</a> - Bring
|
||
together creative coders, data designers and creators working at the
|
||
intersection of data, art and technology.</li>
|
||
<li><a href="http://www.mutek.org/en">Mutek</a> - Organization dedicated
|
||
to digital creativity in sound, music, and audio-visual art.</li>
|
||
<li><a href="https://nodeforum.org/">Node</a> - An open platform for the
|
||
exchange on culture, arts and technology.</li>
|
||
<li><a href="http://www.ddd.it">Digital Design Days</a> - 3 day event
|
||
offering conferences, workshops, digital showcases &
|
||
installations.</li>
|
||
<li><a href="http://codame.com/">CODAME ART+TECH</a> - Projects and
|
||
nonprofit events, to inspire through experience.</li>
|
||
<li><a href="https://nextart.tech/">NextArt Night</a> - Inspiring people
|
||
through creative uses of tech.</li>
|
||
</ul>
|
||
<h2 id="museums-galleries">Museums • Galleries</h2>
|
||
<ul>
|
||
<li><a href="https://zkm.de">ZKM — Zentrum für Kunst und Medien,
|
||
Karlsruhe/Germany</a> - ZKM organizes exhibitions and events on the
|
||
effects of media, digitization, and globalization.</li>
|
||
<li><a href="https://ars.electronica.art/center/">Ars Electronica
|
||
Center, Linz/Austria</a> - Museum of the Future — a place where diverse
|
||
blends of artistic genres, scientific domains and technological
|
||
directions are displayed and processed.</li>
|
||
<li><a href="https://www.technorama.ch/en/home">Technorama,
|
||
Zurich/Switzerland</a> - Technorama allows hands-on experiences of
|
||
hundreds of natural phenomena and technology.</li>
|
||
<li><a href="https://www.katevassgalerie.com/">Kate Vass Gallery -
|
||
Zürich/Switzerland</a> - Contemporary art gallery presenting works by
|
||
international established, mid-career, and emerging artists focusing on
|
||
photography and new technologies.</li>
|
||
<li><a href="http://dam.org">Digital Art Museum - Berlin/Germany</a> -
|
||
Digital Art Museum is an <strong>online</strong> resource for the
|
||
history and practice of digital fine art.</li>
|
||
<li><a href="https://nxtmuseum.com">NXT Museum -
|
||
Amsterdam/Netherlands</a> - The first museum in the Netherlands
|
||
dedicated to new media art.</li>
|
||
</ul>
|
||
<h2 id="schools-workshops">Schools • Workshops</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.gold.ac.uk/pg/ma-computational-arts/">Goldsmiths, UoL,
|
||
MA Computational Art</a> - Graduate program in London which develops
|
||
your arts practice through the expressive world of creative
|
||
computation</li>
|
||
<li><a href="https://www.arts.ac.uk/creative-computing-institute">UAL
|
||
Creative Computing Institute</a> - school in London working at the
|
||
intersection of creativity and computational technologies</li>
|
||
<li><a href="http://sfpc.io/">School for Poetic Computation</a> - School
|
||
in New York that explore the intersections of code, design, hardware and
|
||
theory.</li>
|
||
<li><a href="http://ciid.dk/">Copenhagen Institute of Interaction
|
||
Design</a> - Hosts a range of educational initiatives, most notably, the
|
||
Interaction Design Programme and the CIID Summer School.</li>
|
||
<li><a
|
||
href="https://docs.google.com/spreadsheets/d/1o__WKUBTHLoQX8pSRJsh0wMC8fCGzycQ0ezxe5CklxM/edit?usp=sharing">Residencies,
|
||
Fellowships, Summer Schools</a> - Huge list of residencies, fellowships
|
||
and summer schools around the world (Navigate with the bottom left
|
||
tabs).</li>
|
||
</ul>
|
||
<h2 id="blogs-websites">Blogs • Websites</h2>
|
||
<ul>
|
||
<li><a href="http://creativeapplications.net/">CreativeApplications.Net
|
||
[CAN]</a> - Famous digital art blog.</li>
|
||
<li><a href="https://iquilezles.org">iquilezles.org</a> - Home of Íñigo
|
||
Quílez, specialised in GLSL and math snippets.</li>
|
||
<li><a href="http://www.bit-101.com/blog/">bit-101.com</a> - Blog by
|
||
Keith Peters, specialised in creative coding.</li>
|
||
<li><a
|
||
href="http://ibreakdownshaders.blogspot.com.au/">ibreakdownshaders</a> -
|
||
Explore the math behind shaders.</li>
|
||
<li><a
|
||
href="http://www.adriancourreges.com/blog/">adriancourrèges.com</a> -
|
||
Blog of software engineer Adrian Courrèges. Articles about game graphics
|
||
studies etc.</li>
|
||
<li><a href="https://www.clicktorelease.com">clicktorelease.com</a> -
|
||
Home of Jaume Sanchez Elias, with demos, talks, articles on WebGL and
|
||
WebVR.</li>
|
||
<li><a href="http://blog.hvidtfeldts.net/">syntopia</a> - Blog about
|
||
generative art and systems, by Mikael Hvidtfeldt Christensen.</li>
|
||
<li><a href="http://madebyevan.com/">madebyevan.com</a> - WebGL
|
||
experiments and articles by Evan Wallace.</li>
|
||
<li><a href="http://www.songho.ca/">songho.ca</a> - Home of Song Ho Ahn,
|
||
with a good collection of tutorials on OpenGL and math.</li>
|
||
<li><a href="https://simonschreibt.de/">simonschreibt.de</a> - Game art
|
||
tricks, design tricks by Simon Schreibt.</li>
|
||
<li><a href="https://sighack.com/">sighack.com</a> - Blog about
|
||
generative art algorithms and techniques, by Manohar Vanga.</li>
|
||
<li><a
|
||
href="https://github.com/cx20/jsdo.it-archives">jsdo.it-archives</a> -
|
||
Compilation of WebGL experiments including comparisons on WebGL
|
||
frameworks and physics engine (oimo.js, cannon.js, ammo.js)</li>
|
||
<li><a href="https://www.webaudioweekly.com/">WebAudio Weekly</a> -
|
||
Newsletter to know everything about the WebAudio API</li>
|
||
</ul>
|
||
<h2 id="related">Related</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/eug/awesome-opengl">Awesome opengl</a> -
|
||
Curated list of awesome OpenGL libraries, debuggers and resources.</li>
|
||
<li><a href="https://github.com/sjfricke/awesome-webgl">Awesome
|
||
webgl</a> - Curated list of awesome WebGL libraries, resources and much
|
||
more.</li>
|
||
<li><a href="https://github.com/raphamorim/awesome-canvas">Awesome
|
||
canvas</a> - Curated list of awesome HTML5 canvas with examples, related
|
||
articles and posts.</li>
|
||
<li><a
|
||
href="https://github.com/willianjusten/awesome-audio-visualization">Awesome
|
||
audio visualization</a> - Curated list about Audio Visualization.</li>
|
||
<li><a
|
||
href="https://github.com/jbhuang0604/awesome-computer-vision">Awesome
|
||
computer vision</a> - Curated list of awesome computer vision
|
||
resources.</li>
|
||
<li><a
|
||
href="https://github.com/mathisonian/awesome-visualization-research">Awesome
|
||
visualization research</a> - Curated list of recommended research papers
|
||
and other readings on data visualization.</li>
|
||
<li><a href="https://github.com/lvm/awesome-livecoding/">Awesome
|
||
livecoding</a> - Curated list of livecoding languages and tools.</li>
|
||
<li><a href="https://github.com/ericjang/awesome-graphics">Awesome
|
||
graphics</a> - Curated list of computer graphics tutorials and
|
||
resources.</li>
|
||
<li><a href="https://github.com/mattdesl/graphics-resources">Graphics
|
||
resources</a> - Curated list of graphic programming resources.</li>
|
||
<li><a href="https://github.com/ellisonleao/magictools">Magic tools</a>
|
||
- Curated list of game development resources to make magic happen.</li>
|
||
<li><a
|
||
href="https://github.com/caesar0301/awesome-public-datasets">Awesome
|
||
public datasets</a> - Curated list of public available datasets, mostly
|
||
free resources.</li>
|
||
<li><a href="http://d.hatena.ne.jp/hanecci/20131005/p1">Link collection
|
||
of ray marching on the GPU</a> - Curated list from 2013.</li>
|
||
<li><a href="https://github.com/timzhang642/3D-Machine-Learning">3D
|
||
Machine Learning</a> - A resource repository for 3D machine
|
||
learning.</li>
|
||
<li><a
|
||
href="https://github.com/j0hnm4r5/awesome-creative-technology">Awesome
|
||
creative technology</a> - Curated list of Creative Technology groups,
|
||
companies, studios, collectives and more.</li>
|
||
</ul>
|
||
<h2 id="license">License</h2>
|
||
<p><a href="https://creativecommons.org/publicdomain/zero/1.0/"><img
|
||
src="http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg"
|
||
alt="CC0" /></a></p>
|
||
<p>To the extent possible under law, <a href="http://terkel.com">Terkel
|
||
Gjervig</a> has waived all copyright and related or neighboring rights
|
||
to this work.</p>
|
||
<p><a
|
||
href="https://github.com/terkelg/awesome-creative-coding">creativecoding.md
|
||
Github</a></p>
|