lists/awesome-creative-coding
1
0
Fork 0
mirror of https://github.com/terkelg/awesome-creative-coding.git synced 2025-08-29 19:59:47 +02:00
Code Issues Releases Wiki Activity

Added logo

Browse Source
This commit is contained in:
Terkel Gjervig
2017-01-15 17:53:22 -08:00
parent 01451ad062
commit 481c065a0d
2 changed files with 62 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
README.md
View File

@@ -1,12 +1,15 @@
# Awesome Creative Coding [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)
> A curated list of **beginner-friendly** tools, resources and shiny things to get you started with creative coding.
[<img src="" align="right" width="70">](https://github.com/terkelg/awesome-creative-coding)
*<sub>
This is primarly material and resources for beginners, if you're a rock-start check out: [Graphics resources](https://github.com/mattdesl/graphics-resources) by [@mattdesl](https://github.com/mattdesl) and [Awesome OpenGL](https://github.com/eug/awesome-opengl) by [@eug](https://github.com/eug).
</sub>*
> A curated list of **beginner-friendly** tools, resources and shiny things to get you started.
## Table of Contents
*You might also like [Graphics resources](https://github.com/mattdesl/graphics-resources) and [Awesome OpenGL](https://github.com/eug/awesome-opengl).*
*Please read the [contribution guidelines](contributing.md) before contributing.*
-
## Contents
<details>
<summary>Table of Contents</summary>
<ul>
@@ -26,16 +29,16 @@ This is primarly material and resources for beginners, if you're a rock-start ch
</details>
## Books
- [Generative Art: A Practical Guide](http://zenbullets.com/book.php) - A practical guide using Processing.
- [Generative Art: A Practical Guide](http://zenbullets.com/book.php) - A practical guide using Processing.
- [Generative Design](http://www.generative-gestaltung.de/) - Visualize, Program, and Create with Processing.
- [The Nature of Code](http://natureofcode.com/) - Simulating natrual systems with Processing.
- [The Nature of Code](http://natureofcode.com/) - Simulating natrual systems with Processing.
- [The Book of Shaders](https://thebookofshaders.com/) - Step-by-step guide through the abstract and complex universe of fragment shaders.
- [Programming Design Systems](https://programmingdesignsystems.com/) - A practical introduction to the new foundations of graphic design.
- [Pixel Shaders](http://pixelshaders.com/) - An Interactive Introduction to Graphics Programming.
- [Learning Modern 3D Graphics Programming](https://paroj.github.io/gltut/) - A series of tutorials on using OpenGL to do graphical rendering.
- [Scratchapixel 2.0](http://www.scratchapixel.com/) - Learn Computer Graphics From Scratch.
- [Programming Interactivity](http://shop.oreilly.com/product/9780596154158.do) - A Designer's Guide to Processing, Arduino, and openFrameworks.
- [Algorithms for Visual Design Using the Processing Language](https://www.amazon.com/gp/0470375485/) - Experiment with design problems to create 3D animations, GUIs, and more.
- [Algorithms for Visual Design Using the Processing Language](https://www.amazon.com/gp/0470375485/) - Experiment with design problems to create 3D animations, GUIs, and more.
- [Data-driven Graphic Design](https://www.amazon.com/dp/1472578309/) - Creative Coding for Visual Communication.
- [Foundation HTML5 Animation with JavaScript](http://www.apress.com/us/book/9781430236658) - Everything you need to know to create animation using the HTML5 canvas.
- [Playing with chaos](http://www.playingwithchaos.net/) - Programming Fractals and Strange Attractors in JavaScript.
@@ -53,7 +56,7 @@ This is primarly material and resources for beginners, if you're a rock-start ch
## Communities
- [realtimevfx.com](https://realtimevfx.com/]) - Real Time VFX Community.
- [realtimevfx.com](https://realtimevfx.com/]) - Real Time VFX Community.
- [creative-dev](https://creative-dev.herokuapp.com/) - Creative Developement Slack.
- [The Creative Coding Podcast](http://creativecodingpodcast.com/) - Iain and Seb discuss the ins and outs of creative coding.
@@ -74,7 +77,7 @@ This is primarly material and resources for beginners, if you're a rock-start ch
- [Stackgl](http://stack.gl/) - Open software ecosystem for WebGL, built on top of browserify and npm.
- [Paper.js](http://paperjs.org/) - The swiss army knife of vector graphics scripting.
- [Pixi.js]() - HTML 5 2D rendering engine that uses webGL with canvas fallback.
- [p5.js](https://p5js.org/) - JavaScript library that starts with the original goal of Processing.
- [p5.js](https://p5js.org/) - JavaScript library that starts with the original goal of Processing.
- [Fabric.js](http://fabricjs.com/) - Javascript canvas library, SVG-to-canvas parser.
- [Sketch.js](http://soulwire.github.io/sketch.js/) - Minimal JavaScript creative coding framework.
- [Two.js](https://two.js.org/) - Two-dimensional drawing api geared towards modern web browsers.
@@ -113,7 +116,7 @@ This is primarly material and resources for beginners, if you're a rock-start ch
## Articles
- [Shepherding random numbers](http://inconvergent.net/shepherding-random-numbers/) - Tiny guide to shepherding random numbers.
- [FBO particles](http://barradeau.com/blog/?p=621) - Article about FBO/GPGPU particles by @nicoptere.
- [FBO particles](http://barradeau.com/blog/?p=621) - Article about FBO/GPGPU particles by @nicoptere.
- [Ray marching (with THREE.js)](http://barradeau.com/blog/?p=575) - Article about ray marching with three.js by @nicoptere.
- [Visualizing Algorithms](https://bost.ocks.org/mike/algorithms/) - A look at the use of visualization to understand, explain and debug algorithms.
- [Custom shaders with Three.JS](https://csantosbh.wordpress.com/2014/01/09/custom-shaders-with-three-js-uniforms-textures-and-lighting/) - Introduction to custom shaders, uniforms, textures and lighting in three.js.
@@ -137,7 +140,7 @@ This is primarly material and resources for beginners, if you're a rock-start ch
- [Shadertoy](https://www.shadertoy.com/) - Build and share shaders with the world and get inspired.
- [GLSLbin](http://glslb.in/) - Fragment shader sandbox with support for glslify.
- [GLSL Sandbox](http://glslsandbox.com/) - Online shader editor and gallery.
- [CodePen](http://codepen.io/) - Show case of advanced techniques with editable source code.
- [CodePen](http://codepen.io/) - Show case of advanced techniques with editable source code.
- [OpenProcessing](https://www.openprocessing.org/) - Algorithmic Designs Created with Processing, p5js and processingjs.
- [Dwitter](https://www.dwitter.net/) - Social network for short JavaScript demos.
- [Chrome Experiments](https://www.chromeexperiments.com/) - Showcase of web experiments written by the creative coding community.
@@ -185,7 +188,7 @@ This is primarly material and resources for beginners, if you're a rock-start ch
## Websites / Blogs
- [abandonedart.org](http://abandonedart.org/) - Generative art ideas by Matt Pearson.
- [iquilezles.org](http://www.iquilezles.org) - Home of Íñigo Quílez.
- [iquilezles.org](http://www.iquilezles.org) - Home of Íñigo Quílez.
- [bit-101.com](http://www.bit-101.com/blog/) - Blog by Keith Peters.
- [IBreakDownShaders](http://ibreakdownshaders.blogspot.com.au/) - Explore the math behind shaders.

46
creative-coding.svg Normal file
View File

@@ -0,0 +1,46 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 816.8 690.3" style="enable-background:new 0 0 816.8 690.3;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);stroke:#191E4C;stroke-width:35;stroke-miterlimit:10;}
.st1{fill:#FCD87F;stroke:#571E2A;stroke-linecap:round;stroke-miterlimit:10;}
.st2{fill:none;stroke:#191E4C;stroke-width:25;stroke-miterlimit:10;}
.st3{fill:#F9EFC7;stroke:#191E4C;stroke-width:25;stroke-miterlimit:10;}
</style>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="87.6579" y1="453.7239" x2="766.7593" y2="453.7239">
<stop offset="0.1134" style="stop-color:#73FE73"/>
<stop offset="0.4916" style="stop-color:#22D4EA"/>
<stop offset="0.8931" style="stop-color:#A77DF7"/>
</linearGradient>
<path class="st0" d="M756.1,245.3l-96.6-10.7v354.9c0,6.6-5.4,12.2-12,12.2H87.7c1.8,1,4.2,2.8,6.8,3.1l614.2,68
c6.6,0.7,12.5-4.1,13.2-10.6l44.7-403.5C767.4,252,762.6,246,756.1,245.3z"/>
<g>
<defs>
<path id="SVGID_2_" d="M647.5,601.5h-618c-6.6,0-12-5.4-12-12v-406c0-6.6,5.4-12,12-12h618c6.6,0,12,5.4,12,12v406
C659.5,596.1,654.1,601.5,647.5,601.5z"/>
</defs>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="11.5699" y1="190.0445" x2="665.4301" y2="582.9233">
<stop offset="0.1134" style="stop-color:#73FE73"/>
<stop offset="0.4916" style="stop-color:#22D4EA"/>
<stop offset="0.8931" style="stop-color:#A77DF7"/>
</linearGradient>
<use xlink:href="#SVGID_2_" style="overflow:visible;fill:url(#SVGID_3_);"/>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_2_" style="overflow:visible;"/>
</clipPath>
<use xlink:href="#SVGID_2_" style="overflow:visible;fill:none;stroke:#191E4C;stroke-width:35;stroke-miterlimit:10;"/>
</g>
<path class="st1" d="M764.1,58.9"/>
<polyline class="st2" points="100.1,243.4 155.3,292 99.9,340.9 "/>
<line class="st2" x1="164" y1="356.7" x2="265" y2="356.7"/>
<g>
<path class="st3" d="M550,266.4c-21.1-21.1-55.3-21.1-76.4,0c-20.7,20.7-20.8,43.5-27.4,57.2c-1.2,2.5-2.6,4.7-4.5,6.5
c-14,14-23.2,8.4-23.2,16c0,7.6,29.7,26,60.8,26c17.7,0.1,35-4.6,50.1-13.3c7.5-4.4,14.4-9.7,20.6-16
C571.1,321.8,571.1,287.5,550,266.4z"/>
<path class="st3" d="M786.9,12.5c-14.5,0-170.5,127.1-204.1,160.6c-21.7,21.7-39.1,51.3-39.1,67.3c0,6.5,25.5,32.6,32.6,32.6
c16,0,45.6-17.3,67.3-39.1c33.5-33.5,160.6-189.6,160.6-204.1C802.5,21.1,795.7,14.3,786.9,12.5z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB