素晴らしいクリエイティブコーディング
主に初心者/中間体向けの素晴らしいクリエイティブコーディングリソースの慎重にキュレーションされたリスト。
クリエイティブコーディングは、プログラミングシステムとは異なる規律です。目標は、機能的なものではなく表現力豊かなものを作成することです。インタラクションデザイン、情報視覚化、生成アートはすべて、さまざまなタイプのクリエイティブコーディングです。これは、コードとして明確にされたアートワークを説明する家庭用語になりました。
貢献する前に、貢献ガイドラインをお読みください。
コンテンツ
- 本
- オンラインブック
- コース
- ツール
- フレームワーク•ライブラリ•エコシステム
- 視覚的なプログラミング言語
- サウンドプログラミング言語
- Webプログラミング•ライブラリ
- 投影マッピング•VJing
- オンライン
- ハードウェア
- 他の
- 学習リソース
- ビデオ
- 話し合い
- 記事
- シェーダー•opengl•webgl
- キャンバス
- ハードウェア
- 他の
- 相互の作用
- クイックリファレンス•チートシート
- コミュニティ
- 数学
- 機械学習•コンピュータービジョン•AI
- インスピレーション
- イベント
- 学校•ワークショップ
- ブログ•ウェブサイト
- 関連している
本
- 生成アート:実用的なガイド - 処理を使用した実用的なガイド。
- 生成設計 - 処理とともに視覚化、プログラム、および作成。
- コードの性質 - 処理で自然システムをシミュレートします。
- プログラミング設計システム - グラフィックデザインの新しい基礎の実用的な紹介。
- 学習モダンな3Dグラフィックプログラミング - OpenGLを使用してグラフィカルなレンダリングを行うための一連のチュートリアル。
- プログラミングインタラクティブ性 - 処理、Arduino、およびOpenFrameWorksのデザイナーガイド。
- OpenFrameWorks Essentials -OpenFrameWorksプログラマー、ビジュアルアーティスト、またはデザイナー向けの初心者ガイド。
- Mastering OpenFrameWorks:Creative Coding Demystified -OpenFrameWorksの詳細ガイド。
- 処理言語を使用した視覚設計のアルゴリズム - デザインの問題を試して、3Dアニメーション、GUIなどを作成します。
- JavaScriptを使用したFoundation HTML5アニメーション - HTML5キャンバスを使用してアニメーションを作成するために知っておく必要があるすべて。
- Chaosでの遊び - JavaScriptのフラクタルと奇妙なアトラクタのプログラミング。
- 1つの週末にレイトレース - レイトレースに関するミニブック。
- 処理2:クリエイティブプログラミングクックブック - 実用的で有用なレシピを使用して、処理環境を探索するように導きます。
- データ駆動型グラフィックデザイン - 視覚コミュニケーションのためのクリエイティブコーディング。
- リアルタイムレンダリング - 最新のテクニックを使用して、ほんの数秒で合成3次元画像を生成する方法を学びます。
- グラフィックスシェーダー:理論と実践 - シェーダープログラミング全般の紹介ですが、GLSLシェーディング言語に焦点を当てています。
- AntonのOpenGL 4チュートリアル - OpenGLで3Dプログラミングを開始するための実用的なガイド。
- JavaScriptゲーム、アニメーション、およびシミュレーション用の物理 - JavaScriptプログラマーに、実際の物理学をHTML5ゲーム、アニメーション、シミュレーションに組み込む方法を教えます。
- プログラマーの数学 - 本は、コードの数学的問題を解決することを教えています。
- SynthèseD'ImagesAvec OpenGL(ES) - OpenGL、OpenGL ES、WebGLをカバーするフランス語で予約してください。
- Magentaとの実践的な音楽の世代 - 音楽生成と音楽の構成における深い学習の役割を探ります。
オンラインブック
- Shadersの本 - フラグメントシェーダーの抽象的で複雑な宇宙を段階的にガイドします。
- Webgl Fundamentals -Webglはゼロから。魔法はありません。
- WebGL 2基礎-WebGl2からゼロから。魔法はありません。
- OpenGLを学ぶ - 現代のOpenGLを学ぶための広範なチュートリアルリソース。
- ScratchApixel 2.0-ゼロからコンピューターグラフィックを学習します。
- Ofbook- OpenFrameWorksに関するコミュニティが書いた本/ガイド。
- OGLDEV -Etay Meiriによる最新のOpenGLチュートリアルのコレクション。
- OpenGLチュートリアル - OpenGL 3.3以降のチュートリアル専用のサイト。
- open.gl- openglを使用することの基本を教えるガイド。
- ピクセルシェーダー - グラフィックプログラミングのインタラクティブな紹介。
- OpenGlbook -OpenGLプログラミングチュートリアルをオンラインブック形式の無料。
- グラフィックプログラミングプロジェクト-MorganMcGuireによる3D Computational Graphicsについて予約してください。
- 生成アルゴリズムについて - Anders Hoffによる、例とPythonコードを使用して、さまざまなオーガニックパターンの生成に関するメモ。
- ゼロからのコンピューターグラフィック - OpenGLとDirectXの仕組みを教えてくれるレイトレースとラスター化の教科書。
- BézierCurvesの入門書 - Bézierのことをする方法を本当に知る必要があるときの無料の本。
- 初心者向けの3Dゲームシェーダー - リアルタイムシェーディングテクニックのステップバイステップガイド。
- Xem WebGLガイド - WebGLへのステップバイステップガイド。
- Creative Coding Notebooks -DiegoInácioによる、クリエイティブコーディングとコンピューターアートに関する基本的なPythonレシピの著者セット。
- WebGL Academy -WebGLと3Dアルゴリズムを進歩的でインタラクティブな方法で学習します。
コース
- WebGLを使用してJSで3Dグラフィックを作成します - フレームワークなしでWebGLを使用してコンテンツの作成を開始します。
- HTML5グラフィックスとアニメーションを学ぶ - Canvas 2D描画APIの紹介。
- インタラクティブな3Dグラフィックス-3Dコンピューターグラフィックスの原則を教えるUdacityコース。
- Interactive Computer Graphics -Courseraのコンピューターグラフィックコース。
- Kadenze Creative Coding-P5.JS、TensorFlow、Max/Jitter、およびChuckをカバーするKadenzeコースの選択。
- デジタルメディアおよびモバイルアプリ向けのクリエイティブプログラミング-Coursera Coursera Course on Creative Coding with Procession。
- 架空の研究所 - 豪華なインタラクティブなグラフィックを作成する方法を学びます。
- 将来の学習:クリエイティブコーディング - コンピュータープログラミングを創造的な分野として使用して、サウンド、画像、アニメーションなどを生成します。
- JSのイントロ:描画とアニメーション - JavaScriptとProcessingJSライブラリを使用して、図面とアニメーションを作成します。
- Advanced JS:自然シミュレーション - JS、ProcessingJS、および数学的概念を組み合わせて、プログラムの自然をシミュレートする
- 処理によるインタラクティブなデータの視覚化 - 処理でデータを読み取り、マップし、説明する方法を学びます。
- データの視覚化:処理用のコーディングツールキット - 処理の世界で情報デザイナーのニコラスフェルトンに参加します。
- データの視覚化の紹介-Nicholas Feltonに参加して、データの視覚化の賢く、包括的で刺激的なイントロを紹介します。
- プログラミンググラフィックI、2、3-ジョシュアデイビスと一緒にアートで生成アートと処理を学びます。
- Canvas&WebGLによるクリエイティブコーディング - マットデスラウリアーズによるワークショップ。これは、生成アート、インタラクティブなアニメーション、3Dグラフィックス、シェーダーについて教えてくれます。
- Webgl&Shadersによる高度なクリエイティブコーディング-Matt Deslauriersによるワークショップは、グラフィックプログラミング、数学、シェーダーに深く入り込みます。
- Three.JS Journey -Bruno Simonによるこのコースは、あなたが初心者であろうと上級開発者であるかどうかにかかわらず、Three.jsで最もクールなWebGL Webサイトを作成するための秘密を教えます。
- 3Dコンピューターグラフィックスプログラミング - Cプログラミング言語を使用してソフトウェアレンダラーをゼロから作成しながら、3Dグラフィックスの背後にあるすべての理論と数学を学びます
ツール
フレームワーク•ライブラリ•エコシステム
- 処理[クロスプラットフォーム] - 視覚芸術のためのコンピュータープログラミング言語とIDE。
- PY5 [Cross -Platform] - Python 3 Ecossystemに処理を統合するライブラリ。
- Cinder [Cross-Platform] - C ++のプロフェッショナル品質のクリエイティブコーディングのためのオープンソースライブラリ。
- OpenFrameWorks [Cross -Platform] - クリエイティブコーディング用のオープンソースC ++ツールキット。
- C4 [iOS] - iOS用のオープンソースクリエイティブコーディングフレームワーク。
- Unity [Mac、Win] - ゲームエンジンですが、創造的なコーディングとインストールに役立ちます。
- Godot [Cross -Platform] - オープンソースゲームエンジンは、あらゆる種類のものにも使用できます。
- PlayCanvas [Cross -Platform] - オープンソース、リアルタイムコラボレーションWebGLエンジン。
- HG_SDF [Cross -Platform] -GLSLライブラリ署名距離関数を構築するためのGLSLライブラリ。
- Nannou [Cross-Platform] - 錆言語のオープンソースクリエイティブコーディングフレームワーク。
- thi.ng [Cross -Platform] - JavaScript、TypeScript、Clojure、ClojureScript言語用の計算設計ツールのオープンソースコレクション。
- Pixelkit [iOS、Mac] - オープンソース、ライブグラフィックス、Swiftフレームワーク、金属を搭載。
- OpenRNDR [Cross -Platform] - Kotlinで書かれたクリエイティブコーディング用のオープンソースライブラリ。
- Phaser [Cross -Platform] - ゲームを構築するためのHTML5フレームワークは、キャンバスとWebGLレンダラーの両方を使用します。
- Canvas-Sketch [Cross-Platform] -HTML5フレームワークJavaScriptとブラウザで生成アートワークを作成するためのフレームワーク。
- asyncgraphics [iOS、macos] - オープンソース、ライブグラフィックス、非同期 / waint、迅速なパッケージ、金属を搭載。
- Lygia [Cross-Platform] - 粒状および多言語(GLSL、HLSL、WGSL、MSL、CUDA)シェーダーライブラリがパフォーマンスと柔軟性のために設計されています。
- fragment.tools [Cross -Platform] - クリエイティブコーディングのためのWeb開発環境。
視覚的なプログラミング言語
- VVVV [WIN] - ハイブリッドビジュアル/テキストのライブプログラミング環境が簡単なプロトタイプと開発。
- Nodebox [MAC、Win] - クロスプラットフォーム、ノードベースのGUI効率的なデータの視覚化と生成設計。
- TouchDesigner [Mac、Win] - リアルタイムプロジェクトを作成する視覚開発プラットフォーム。
- Quartz Composer [Mac] - グラフィカルデータの処理とレンダリングのための開発ツール。
- Vuo [Mac] - ライブインタラクティブメディアプログラミング環境。
- Max [Mac、Win] - メディアの視覚的なプログラミング言語。
- 純粋なデータ[クロスプラットフォーム] - マルチメディア用のオープンソースビジュアルプログラミング言語。
- Ossia Score [Cross-Platform] - インタラクティブ、インターメディアオーディオ視聴覚シーケンサー。
- Tooll [win] - インタラクティブな3Dコンテンツとアニメーションを作成するためのオープンソースツール。
- XOD [クロスプラットフォーム] - マイクロコントローラーベースのプロジェクトのオープンソースビジュアルプログラミング言語と環境。
- Isadora [Cross -Platform] - 統合された投影マッパーを備えたシーンベースのメディア制御ソフトウェア。
- ケーブル[Cross -Platform/Web] - 美しいインタラクティブコンテンツを作成するためのモデルキット。現在、プライベートベータ版では、招待状を要求できます。
- ETERNAL [web] - 作成のための構成ツールとしてグラフとグラフとしてプログラム
- Notch Builder [win] - リアルタイムグラフィックスに重点を置いたノードベースのオーサリングツール。現在ベータ版です。
- Joy.js-リアルタイムの視覚コーディングツール、理解しやすく、初心者を対象としています。
- Circles [iPhone、iPad、Mac] -asyncgraphicsを搭載したライブグラフィックスノードエディター。
- TIC -80 -240*136ピクセルの画面でピクセルアートスタイルのゲームとアートを作ります。
サウンドプログラミング言語
- SuperCollider [Multi -Platform] - オーディオ合成とアルゴリズム組成のためのプラットフォーム。
- Chuck-強いタイミング、同時、およびオンザフライの音楽プログラミング言語。
- Tidalcycles-パターンのライブコーディング用のドメイン固有言語。
- Sonic Pi-みんなのためのライブコーディングミュージックシンセ。
- CSound-サウンドおよび音楽コンピューティングシステム。
- ORCA-手続き上のシーケンサーを迅速に作成するライブコーディング環境。
- Handel-ブラウザで曲を書くための小さな手続き上のプログラミング言語。
- Overtone-合成や楽器の構築からライブコーディングまで、新しい音楽のアイデアを探求するために設計されたオープンソースのオーディオ環境。
- Melrōse-音楽を作成するためのMIDIプロデュース環境。
- Glicol-錆で書かれたグラフ指向のライブコーディング言語と音楽/オーディオDSPライブラリ。
Webプログラミング•ライブラリ
- Three.js -JavaScript 3Dライブラリ。
- regl-機能的なwebgl。
- stackgl- browserifyとnpmの上に構築されたWebGL用のオープンソフトウェアエコシステム。
- Paper.js-ベクターグラフィックススクリプトのスイスアーミーナイフ。
- Pixi.js -HTML 5 Canvas Fallbackを使用してWebGLを使用する2Dレンダリングエンジン。
- P5.JS -処理の当初の目標から始まるJavaScriptライブラリ。
- PTS.JS -Visualization and Creative -CodingのJavaScriptライブラリ。
- Fabric.js-JavaScript Canvasライブラリ、SVGからCANVASパーサー。
- Maker.js- SVG、CNC、レーザーカッター用のパラメトリックライン図。
- OpenJScad- JavaScriptのプログラム3Dモデリング。
- Sketch.js -Minimal JavaScript Creative Coding Framework。
- Two.js -2次元の描画API最新のWebブラウザーを対象としています。
- CLAYGL -Scalable Web3Dアプリケーションを構築するためのWebGLグラフィックライブラリ。
- プロトン - 軽量で強力なJavaScript粒子エンジン。
- lightgl.js-軽量のwebglライブラリ。
- Picogl.js-最小限のWebGL 2レンダリングライブラリ。
- Alfrid -WebGLツールセット。
- Babylon.js -HTML 5とWebGLを使用して3Dゲームを構築するためのJavaScriptフレームワークを完了します。
- Twigl-小さなWebglヘルパーライブラリ。
- luma.gl-データ視覚化のためのwebgl2コンポーネント。
- CSS -Doodle- CSSでパターンを描画するためのWebコンポーネント。
- ogl.js -JavaScript 3Dライブラリ(WebGL)。
- ZDOG -Canvas&SVG用の擬似3Dエンジン。
- oimo.js -JavaScript用の軽量3D物理エンジン
- ammo.js -emscriptenを使用した弾丸物理エンジンの直接ポートへのJavaScriptへの直接ポート。
- Theatre.js-視覚ツールを備えたモーションデザインライブラリ
- GraphicsJS -Graphics and Animations(SVG/VML)のための軽量のオープンソースJavaScriptライブラリ。
投影マッピング•VJing
- MadMapper [MAC] - ビデオマッピング投影とライトマッピング。
- VDMX [MAC] - リアルタイムマルチメディアパフォーマンスアプリケーション。
- modul8 [Mac] - リアルタイムビデオのミキシングと合成。
- Resolume [Mac、Win] - デジタルビデオとエフェクトのミキシングリアルタイムで。
- Coge VJ [MAC] -VJソフトウェアは、リアルタイムHDビデオのミキシングとモジュラーユーザーインターフェイスとの合成用に設計されています。
- VirtualMapper-投影マッピング用のリアルタイムプレビューツール。
- Millumin [Mac] - インタラクティブな視聴覚ショーを作成および実行するソフトウェア。
- Smode [win] - リアルタイム2D/3D作成、合成、ビデオマッピングエンジン。
- Veejay [Linux] - 複数のソース(ファイル、デバイス、ストリーム...)からの単純な非線形編集とミキシングを備えたライブパフォーマンスツール
オンライン
- Shadertoy-シェーダーを世界と構築して共有し、インスピレーションを得ます。
- シェーダーパーク - インタラクティブな手順2Dおよび3Dシェーダーを作成するためのJavaScriptライブラリ。
- GLSLサンドボックス - オンラインシェーダーエディターおよびギャラリー。
- SHDRエディター - オンラインシェーダーエディター。
- Codepen-編集可能なソースコードを使用した高度なテクニックのケースを表示します。
- ShaderShop-プログラミングGPUシェーダーのインターフェイス。
- Vertexshaderart-オンラインシェーダーエディターおよびギャラリー。
- CYOS-オンラインシェーダーエディター。
- GlsLeditor -Simple WebGLフラグメントシェーダーエディター。
- OpenProcessing-アルゴリズム設計、処理、P5.JSを作成して実験します。
- P5.JSエディター-P5.JSのオンラインWebエディター
- Livecodelab- VJ、ミュージシャン、教師、生徒、子供向けの走行タイプのツール。
- Turtletoy-生成コードのミニマルなAPIおよびオンラインショーケース。 (JavaScript)
- Shadergif-コードで作られたアートのオープンソースホーム(WebGl1/2、JavaScript Canvas&P5.js)。
- P5LIVE -P5.JSライブコーディング環境。
- Neort-クリエイティブコーダー向けのデジタルアートプラットフォーム(フラグメントシェーダー、JavaScriptキャンバス)。
- シェリー - タートルに指示を発行してプログラミングを学びます。
- Tixy.land-最もミニマリストのクリエイティブコーディング環境は生きています。
- BBCマイクロボット - 8ビットコンピューターエミュレータでツイートを実行します。
- Hydra-ライブコード可能なビデオシンセとコーディング環境。
ハードウェア
- Arduino-デジタルデバイスとインタラクティブオブジェクトを構築するためのオープンソースマイクロコントローラーキット。
- Raspberry Pi-小さなシングルボードコンピューター。
- puck.js-オープンソースJavaScriptマイクロコントローラーワイヤレスでプログラムできます。
- ビーグルボード - 低電力オープンソースシングルボードコンピューター。
- makey makey-日常のオブジェクトをタッチパッドに変え、インターネットと組み合わせます。
- Leap Motion-入力として手と指の動きをサポートするセンサーデバイス。
- Axidraw-シンプルでモダンで正確なペンプロッター。
- Phidgets-コンピューター用のセンサー、入力デバイス、コントローラー。
- Teensy -USBベースのマイクロコントローラー開発システム。
- Lightform -ARプロジェクションマッピング内蔵深度センサー。
他の
- 構造シンセ[クロスプラットフォーム] - 設計文法を指定して3D構造を生成するためのアプリケーション。
- F3 [MAC] - コード3Dフォームをライブできるようにする強力な3Dデザインアプリ。
- fragment [mac] - ライブコードGLSLグラフィックスへのアプリ。
- Shadertool [Win] - プログラマーとFXアーティスト向けのモダンシェーダーIDE。
- Siphon [Mac] - アプリケーションがリアルタイムでフレームを互いに共有できるようにします。
- Kodelife-リアルタイムGPUシェーダーエディター、ライブコードパフォーマンスツール、グラフィックスのプロトタイピングSketchPad。
- ISF -Interactiveアプリケーションで使用するGLSLシェーダー。
- GlslViewer -GLSLシェーダーをレンダリングするライブコーディングコンソールツール。
- Shoebot [Cross -Platform] - Shoebotは、Pythonでベクトルグラフィックとアニメーションを作成するために設計された創造的なコーディング環境です。
- Drawbot [Mac] - Pythonに基づく教育指向2Dグラフィックプログラミング環境。
- Klak-ユニティとの創造的なコーディングのためのスクリプトのコレクション。
- Basil.js-処理の精神におけるデザイナーとアーティストのInDesignのスクリプト(JS)。
- Konstrukt [Cross -Platform] -SVGSとして異なるスケーラブルパターンを生成するコマンドラインツール。
学習リソース
ビデオ
- コーディングトレイン - ダニエルシフマンは、創造的なコーディングに関するビデオを作成しています。
- MFGD-フラグメントシェーダー-Fragmentシェーダーに関するYouTubeプレイリスト。
- シェーダー研究所 - シェーダーに関するYouTubeチャンネル。
- Makin 'のものはよく見えます-YouTubeチャンネルシェーダーケーススタディについて。
- OpenFrameWorksチュートリアルシリーズ - OpenFrameWorksの学習へのYouTubeシリーズ
- OpenFrameWorksチュートリアル-OpenFrameWorksに関するYouTubeプレイリスト - 更新されていない[2015]。
- シェーダーチュートリアルシリーズ-Visual Studioコードを使用したシェーダーに関するYouTubeプレイリスト。
- KHAチュートリアルシリーズ-Haxeに組み込まれたKHAフレームワークに関するYouTubeプレイリスト。
- WebGL 2.0のWebGL 2.0の楽しみ - WebGL 2.0に関するYouTubeプレイリスト。
- Modern OpenGL 3.0+チュートリアル - Modern OpenGLに関するYouTubeプレイリスト。
- VertexShaderart -頂点シェーダーに関するYouTubeプレイリスト。
- Three.jsでのダイビング-YouTubeプレイリストは3.jsにダイビングします。
- Shadertoyチュートリアル-Shadertoyを使用してゼロの知識から始めて、シェーダーの作り方を教えてくれるYouTubeプレイリスト。
- Webgl Lightning -Greg TatumとのWebgl Lightningの紹介。
話し合い
- webglスライドビデオのイントロ - 3.jsを使用してWebglのイントロ。
- Inigo Quilez Live -íñigoQuílezによるライブコーディングビデオのコレクション。
- また、Canvas -Bruno Imbriziは、WebExpo 2016でクリエイティブコーディングのためにキャンバスを使用しています。インタラクティブスライドはこちらです。
- OpenGL 3Dゲームチュートリアル - 3DゲームOpengの作成に関する初心者のチュートリアルシリーズ。
- 私たちがこのたわごとをどのように行うか - ハイテクベースのアーティストがこれを財政的に行う方法について話してください。
- Webglダンスを作る - 心配をやめ、線形代数が大好きであることを学んだ方法。
- Pixel Factory -Steven WittensのWebgl、GPU、Mathについて話します。
- 詩的な計算 - ザック・リーバーマンによる刺激的な話。
- 生成マシン-Matt DeslauriersによるFitc Talkは、生成芸術への情熱について。
記事•チュートリアル
シェーダー•opengl•webgl
- シェーダーの紹介 - 3Jを使用したシェーダーの紹介のパート1。
- Three.js 101 -Creative Coderの観点からThree.jsの紹介。
- LWJGL:シェーダー - LWJGL -Basicsのコンテキストでのシェーダーチュートリアル。
- シェーダー:プライマー - シェーダーのプライマー。
- シェーダー:第2段階 - 前の第2部。
- webglレッスン - フラグメントシェーダー - フラグメントシェーダーの簡単な紹介。
- WebGLレッスン - 3JSシェーダー - 3JSでカスタム頂点とフラグメントシェーダーを使用します。
- 3JSポストプロックの例 - 3JSの後処理効果の例。
- レイマーチングと署名距離関数 - レイトレースの紹介。
- Ray Tracingの紹介 - 3D画像を作成するための簡単な方法。
- GLSL照明ウォークスルー-Glslifyを使用したPhongシェーディングチュートリアル。
- Three Glslifyの例-GlslifyでThree.jsを使用する方法の例。
- dom -greg tatumを超えてwebgl reglを使用してwebglの基本を説明します。
- FBO粒子 - @nicoptereによるFBO/GPGPU粒子に関する記事。
- Ray Marching(Three.jsで) - @nicoptereによるThree.jsでRay Marchingについての記事。
- Three.jsを備えたカスタムシェーダー - Three.jsのカスタムシェーダー、ユニフォーム、テクスチャ、照明の紹介。
- Modern OpenGLへのイントロ - Modern OpenGLの紹介の最初の部分。
- Modern OpenGLシリーズ - いくつかのOpenGL用語の良い紹介。
- スムーズな最小 - スムーズに基づく原始結合に関する記事。
- 距離関数を使用したモデリング - 1つの集中場所での距離関数の収集。
- 体積レンダリング - 体積シェーダー内に複雑な3D形状を作成する方法を説明します。
- リアルタイムレンダリング - リアルタイムレンダリングに関するリソースの本、ブログ、コレクション。
- OpenGL 4シェーダー - アントンゲルデランによるOpenGLシェーダーの短くて甘い紹介。
- レイキャスティング、レイトレース、レイマーチングなど - タイトルはすべてを語っています。アドックによるはじめに。
- 小さなソフトウェアレンダラーを作成する - 基本的なソフトウェアレンダリングの仕組みについては、本当に良い紹介です。
- WebGLチュートリアル - WebGLチュートリアルの非常に優れたコレクションを備えたWebサイト。
- ジオメトリの生成:1、2、3-ジオメトリオブジェクトの作成方法に関する初心者の紹介。
- 頂点シェーダーへ - WebGL、3.JS、および3.basに関する一連のチュートリアル。
- WebGLのスペース - 3Dグラフィックパイプラインを介したさまざまな座標系の簡単な概要。
- WebGLワークショップ - 短くて甘いオンラインWebGLの紹介。
- Three.js&Instanced Geometry -Three.jsとInstanced Geometryを備えたふわふわのプレデター。
- ビルボードを介した粒子効果 - ビルボードとWebGLで粒子効果を作成する方法。
- WebGLとREGLを使用して美しくアニメーション化する - REGLを使用してGPGPU粒子を作成する方法。
- webglチュートリアル:拡張機能なしの方向シャドウマッピング - リアルタイム方向ライトシャドウマッピングの背後にある概念の紹介。
- WebGL Quest-チュートリアルとWebGL Raymarchingおよび距離機能を簡単に使用する便利なリソースのリスト。
- WebGLでのバンプマッピングの探索 - さまざまなバンプマッピング技術の紹介。
- OpenGL/GLSLシェーダープログラミング - OpenGL/GLSLシェーダープログラミングのデッキ。
- シンプレックスノイズフローフィールドの粒子 - パーリンノイズフローフィールドチュートリアル。
- フローフィールド、パート1-ベクトルフィールドとも呼ばれるフローフィールドの紹介。
- フローフィールド、パート2-ベクトルフィールドとも呼ばれるフローフィールドの概要。
- ゲーム用のグラフィック - ニューカッスル大学のシェーダー、数学の郵便処理などを含む3Dグラフィックプログラミングの紹介。
- Three.js Basics -Eric HainesによるThree.jsの紹介。
- WebGLと3.JSのインタラクティブな紹介-Siggraph 2017 WebGLワークショップのスライド。
- コンピューターグラフィックスプログラミングの学習を開始する方法 - EricArnebäckの開始方法に関するアドバイスと考え。
- すべてのコーダーがガンマについて知っておくべきこと - ガンマの重要性を深く掘り下げてください。
キャンバス
- HTML Canvas Deep Dive- Canvas APIの深遠な紹介。
- 31日間のキャンバスチュートリアル - Seb Lee -Delisleによるキャンバスチュートリアルのコレクション。
ハードウェア
- ペンプロッターアート&アルゴリズムパート1、2- JavaScriptを使用してAxidraw Pen Plotterを使用する方法。
他の
- クリエイティブコーディングのノイズ - クリエイティブコーディングのための不可欠なツールとしてのノイズに関する詳細なブログ投稿。
- 猫のようなコーディングのような猫 - 数学、アルゴリズム、統一に関する詳細なチュートリアル。
- 楽しいプログラミング - シンプルなプログラムを作成するクリエイティブコーディングを学びます。
- C4を使用したiOSのクリエイティブコーディング - CREWTING APPLICATIONSで公開されたC4の紹介。
- Cosmos- C4を使用したアプリの設計、プログラミング、および起動に関するエンドツーエンドのチュートリアル。
- 粒子物理学 - 粒子物理学が説明した。
- 視覚化アルゴリズム - 視覚化の使用を調べて、アルゴリズムを理解、説明、デバッグします。
- ゲーム開発の冒険 - ゲーム開発に関する記事のコレクションを理解しやすいですが、創造的なコーディングにも関連しています。
- AMITのゲームプログラミング情報 - パスファインディング、AI、数学などのリソースのコレクション。
- 生成アートワークを改善するためのヒント - アートを良くするためのヒント。
- 生成アートで色を扱う - 色を正しくする方法に関するヒント。
相互の作用
- Shader -School- GLSLシェーダーとグラフィックプログラミングのためのワークショップ。
- Webgl-Workshop-シェーダースクールの続編:WebGL APIを学びます。
- フラグメントアンドリー - インタラクティブフラグメントシェーダーチュートリアル。
- SDFチュートリアル1:Box&Balloon-レイトレースに関するShadertoyチュートリアル。
- Howto:Ray Marching -Shadertoy Tutorial on Ray Marching。
- Raymarch Tutorial2 -Shadertoy Raymarchチュートリアル。
- GLSL 2Dチュートリアル-ShadertoyGLSL 2Dチュートリアル。
- バブルの内訳 - ペルリンによるシェーダーの故障。
- レイマーチャーを作りましょう - レイマーチャーを書くためのインタラクティブシェーダートイ。
- Raymarching -Interactive Shader -Toy Raymarchingチュートリアル。
クイックリファレンス•チートシート
- Shaderific GLSL -OpenGL ESシェーディング言語リファレンス。
- Shaders Glossaryの本 - テーマ別のシェーダー用語集。
- GLTUT用語集ページ:1、2、3、4、5、6、7、8 -OpenGL 3Dプログラミング用語集。
- Canvas Cheatsheet- Quick and Visual Canvasチートシート。
- webglチートシート-webgl 1.0 APIリファレンスカード。
- コンピューターグラフィックスの用語集 - コンピューターグラフィックスを関連付ける用語の用語集。
- GLSLリファレンスガイド-OpenGLシェーディング言語クイックリファレンスガイド。
- 3D Mathsチートシート-Anton GerdelanによるMath Math Cheatsheet、OpenGL Bookから。
- docs.gl-公式OpenGLドキュメントの改善。
- OpenGLシェーディング言語-KhronosグループGLSL Wiki。
- OpenGL 4.3リファレンスカード-OpenGL 4.3 APIのPDFリファレンスカード。
- 緩和 - インタラクティブ緩和機能のチートシート。
- Pixelspirit-学習と参照のために、タロットカードの裏にあるGLSLライブラリ。
- 手続きパターンとノイズ - 手続きパターンと手続き上のノイズの収集。
- 視覚ノイズ - 1Dおよび2Dでノイズアルゴリズムを視覚化します。
- Trigonoparty-単純な三角法の視覚化。
- 形態形成 - 自然の中で形状、形、パターンがどのように出現するかの探求。
コミュニティ
subreddits
- R/CreativeCoding-創造的な分野としてのコンピュータープログラミングの使用を共有および議論する。
- r/raytraycing -subreddit on raytracing。
- R/OpenGL-すべてのプラットフォームでのOpenGLに関するニュースとディスカッション。
- r/graphicsprogramming -subreddit on Graphicsプログラミング。
- R/処理-SubredDit処理時。
- R/シェーダー - シェーダーのsubreddit。
- R/ProceduralGeneration-手続き上の生成に関するsubreddit。
- r/machinelearning-機械学習に関するsubreddit。
- r/generative-生成アートと音楽に関するsubreddit。
スラック
- Creative Coding Club-クリエイティブコーディングクラブのSlack。
他の
- Creative Coding Podcast -IainとSebは、クリエイティブコーディングの内と外について議論しています。
- realtimevfx.com-リアルタイムVFXコミュニティ。
- データストーリー - データの視覚化に関するポッドキャスト。
- 3Dプログラミング毎週の記事 - シェーダーと数学関連のリソースの素晴らしいコレクション。
- Pass the Pen -Codepenで共同クリエイティブコーディングプロジェクトを構築するフロントエンド開発者のコミュニティ。
- Creative Tech Weekly-クリエイティブテクノロジーに関するリソースの毎週のニュースレター。
数学
- 数学としてコード - コード形式の数学表記のチートシート。
- 数学のコーディング - プログラマーとして理解する必要がある数学を教えてくれます。
- 数学スニペット - グラフィックプログラミングを念頭に置いた数学スニペット。
- フォーミュラアニメーション - 数学の絵画の原則。
- もう一度数学を学ぶ - JSとGLSL数学のスニペットのコレクション。
- EASES -Modular Easing方程式のグラブバッグ。
- モーションのための数学 - 異なる運動方程式の視覚化。
- マトリックス乗算 - 視覚化されたマトリックス乗算。
- 代数規則 - 基本的な代数の最も有用なルール。
- 没入型数学 - 完全にインタラクティブな線形代数。
- 画像カーネル - インタラクティブで視覚的な画像カーネルの視覚的な紹介。
- サインとコサイン - サインとコサインのインタラクティブな説明。
- Perlin Noise -Perlinノイズは詳細に説明されています。
- 3Dコンピューターグラフィックスのベクトル数学 - コンピューターグラフィックスの観点からのベクトル代数とマトリックス代数に関するチュートリアル。
- Desmos-グラフ関数、プロットデータ、方程式の評価、変換など。
- MFGD-ゲーム開発者の数学YouTubeプレイリスト。
- 線形代数のエッセンス - 線形代数YouTubeプレイリストのエッセンス。
- アニメーションの数学 - アニメーションの数学(レポ)についてスライドします。
- 数学と準物理学のスケッチ - 数学と準物理学の美しく視覚的な紹介。
- Gene Kogan:Perlinノイズ - 2Dおよび3D Perlinノイズの紹介。
- マトリックス数学とあなた - マトリックスの高レベルの紹介。
- 数学シンボル - すべての数学シンボルとサインのリスト。
- 壮大な2Dマトリックス - 変換マトリックスをよりよく理解するためのインタラクティブツール。
- ゲーム開発のチートシートを使用したゲーム - JavaScript Math Math Snippets for Movement。
- 2Dおよび3Dゲーム用のMaths&Trigonometryチートシート-2Dおよび3Dゲームメーカー向けのMathsチートシート。
- クリエイティブコーディングのためのマトリックス - グレッグテイタムによるマトリックスの紹介。
- 数学で物事を作る - スティーブン・ウィットンのbezier曲線、手続き上の生成、物理エンジン、フラクタルについて話してください。
- myphysicslab-式とコードを備えたインタラクティブなリアルタイム物理シミュレーション。
- 直感的な数学 - 何が起こっているのか視覚的な直観を開発するのに役立つように設計された線形代数やジオメトリのようなフィールドの説明。
- L-Systems-L-Systems用のHaskellパッケージ。
- 線形補間 - 線形補間の紹介(混合/LERPとも呼ばれます)。
- ゲームでのベクター数学の実際の使用 - ゲーム数学のためのベクトルに関する詳細な記事。
- 羊飼いの乱数 - 乱数の小さなガイド。
- 羊飼いのランダムグリッド - ランダムグリッドをシェパングするための小さなガイド。
- 羊飼いのランダム成長 - 羊飼いのランダム成長の小さなガイド。
機械学習•コンピュータービジョン•AI
- ML4A-アーティスト向けの機械学習。
- keras.js-ブラウザでkerasモデル(tensorflowバックエンド)を実行し、GPUをサポートします。
- tesseract.js-純粋なJavaScript多言語OCR。
- Google ML -Googleによるクラウドマシンラーニング。
- Tensorflow-マシンインテリジェンス用のオープンソースソフトウェアライブラリ。
- ConvnetJS-ブラウザの深い学習。
- Wekinator-誰でも機械学習を使用できるようにします。
- 機械学習 - 機械学習リソースへのリンクを備えたコーディングトレインレポ。
- Creativeai.net-クリエイティブなAIプロジェクトを共有するスペース。
- AI Playbook -AI Micrositeは、新規参入者が始めるのを支援することを目的としています。
- Teachable Machine -Machine Learningがどのように機能し、ブラウザに住んでいるかを探ります。
- tensorflow.js -javascriptライブラリブラウザおよびnode.jsでMLモデルをトレーニングおよび展開するためのライブラリ
- こんにちはtensorflow-完全にコメントされたtensorflow.jsデモ。
- ML5.JS-ウェブのフレンドリーな機械学習。
- モデル動物園 - オープンソースのディープラーニングコードと前提条件のモデルを発見します。
- 滑走路 - 設計と創造的なプラットフォームに人工知能機能を追加するツールキット。
- ローブ - シンプルな視覚インターフェイスを使用して、カスタムディープラーニングモデルを構築、訓練、および出荷します。
- ModelDepot-使いやすく、事前に訓練された機械学習モデルを発見、共有、議論するためのプラットフォーム。
インスピレーション
- OpenProcessing-処理、P5J、処理JSで作成されたアルゴリズムデザイン。
- DWITTER-短いJavaScriptデモのソーシャルネットワーク。
- Chrome実験 - クリエイティブコーディングコミュニティによって書かれたWeb実験のショーケース。
- Codedoodl.es-キュレーションされたクリエイティブコーディングスケッチのショーケース。
- 処理用 - 処理に関するプロジェクトとチュートリアル。
- コードからのアート - キース・ピーターズによるコードスケッチ。
- Generator.X -Flickrグループアート&デザインの生成戦略について。
- 生成アート - 生成アートに関するFlickrグループ。
- インスピレーションオンライン - オンラインで公開されたインスピレーションとクリエイティブな作品に関するオープンソースのマイクロブログ。
- Codepenでフォローすべき人 - 従う価値のある興味深い人のリスト。
- Raven Kwok -Visual Artist Raven KwokによるTumblr。
- P5ART-処理における実験の本当に良いコレクション。
- エコフォン - 視覚的なインスピレーションを伴うTumblr。
- ミツバチと爆弾 - デイブによるGIFを備えたTumblr。
- Devart-創造性の可能性を推進するアーティストによるコードで作られた芸術のお祝い。
- Folds2d -曲線、表面、スカラー、ベクトルフィールドを備えたTumblr。
イベント
- OFFFフェスティバル - デジタルデザインフェスティバル(オンラインフラッシュフィルムフェスティバル)。
- グレイエリアフェスティバル - クリエイティブコーディング、アートアンドテクノロジーフェスティバル。
- シグナルフェスティバル - チェコ共和国のプラハでのライトアートと新興技術のショーケース。
- Eyo Festival-データ、アート、テクノロジーの交差点で働くクリエイティブコーダー、データデザイナー、クリエイターを集めます。
- Mutek-サウンド、音楽、視聴覚アートのデジタル創造性に特化した組織。
- ノード - 文化、芸術、技術に関する交換のためのオープンプラットフォーム。
- 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 online 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 - 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
関連している
- Awesome opengl - Curated list of awesome OpenGL libraries, debuggers and resources.
- Awesome webgl - Curated list of awesome WebGL libraries, resources and much more.
- Awesome canvas - Curated list of awesome HTML5 canvas with examples, related articles and posts.
- Awesome audio visualization - Curated list about Audio Visualization.
- Awesome computer vision - Curated list of awesome computer vision resources.
- Awesome visualization research - Curated list of recommended research papers and other readings on data visualization.
- Awesome livecoding - Curated list of livecoding languages and tools.
- Awesome graphics - Curated list of computer graphics tutorials and resources.
- Graphics resources - Curated list of graphic programming resources.
- Magic tools - 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 - Curated list of public available datasets, mostly free resources.
- Link collection of ray marching on the GPU - Curated list from 2013.
- 3D Machine Learning - A resource repository for 3D machine learning.
- Awesome creative technology - Curated list of Creative Technology groups, companies, studios, collectives and more.
ライセンス
To the extent possible under law, Terkel Gjervig has waived all copyright and related or neighboring rights to this work.