ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
クリエイティブコーディングの教科書
ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
【P5 Tips】 ProcessingをNintendo SwitchのJoy-Conで遠隔操作する｜タピオカ
Nintendo Switch 皆さん持ってますよね？ 知っている方も多いと思いますが、Switch の Joy-Con は Bluetooth で PC と接続できるため、いろいろな活用方法があります。 Processing でも簡単に使うことができたので、その方法をメモしておきます。 環境- OS: macOS High Sierra 10.13.5 - Processing: 3.3.7 mac で試しましたが、Windows でも概ね同じだと思います。 Game Control Plus のインストールまずは Processing でゲームパッドを使えるようにするライブラリをインストールします。 「スケッチ」→「ライブラリをインポート」→「ライブラリを追加」を選択して、「joystick」等で検索をかけて Game Control Plus をインストールします。 次に、「スケッチ
Processingによる花火 - Qiita
Processingによって花火を打ち上げる 夏です。花火の季節です！今回はProcessingで花火を演出してみました！ 概要 先ほど投稿した記事でも発光表現を扱いましたが、今回はオリジナルを紹介します。 キー入力によって花火が打ち上がるようになっています。 加速度センサなど、各種センサと連携して花火を打ち上げるのも面白いです！ ソースコードも貼っておきます。(※当初より少し整理しました) ArrayList<Fireworks> fireworks=new ArrayList<Fireworks>(); void setup () { fullScreen(P3D); frameRate(50); hint(DISABLE_DEPTH_TEST); blendMode(ADD); imageMode(CENTER); } void draw () { background(0,0,40
p5.js のスケッチを展示できるサービスを試してまとめてみた : だらっと学習帳
p5.js のスケッチを展示できるサービスを試してまとめてみました。 2019/03/19追記 : NEORTを追加しました。 2021/01/15追記 : 最新の情報にアップデートしました。 OpenProcessing OpenProcessing - Algorithmic Designs Created with Processing Processingの老舗投稿サイトです。どれくらい老舗かというとJavaアプレットで投稿してた時代があったくらいです。 p5.jsおよびProcessing.jsでの投稿を受け付けており、交流機能や作品に対するお気に入り機能なども提供されています。 (※2021/01/15追記 : Processing.jsでの投稿はできますが技術的に古いので非推奨となっています) 最近リニューアルされて、作品がよりかっこよく展示できるような工夫が凝らされています
Denkitribe(keijiro)さんのProcessingのスケッチが最高にクールなので紹介したい！ - karaage. [からあげ]
本記事はProcessing Advent Calendar 2016の19日目の記事です DenkitribeさんがProcessingのスケッチをアップロードしているのを知っていますか？ Denkitribeさんを知っているでしょうか？Korgさんから2007年に発売されたElectribeという独特なシンセサイザがあるのですが、そのElectribeを使った最高にクールな演奏動画をYoutubeにアップされていて当時一躍有名になったのがDenkitribeさんでした。 そのDenkitribeことkeijiroさん、Processingのスケッチをサイト上で公開しているのですが、これがまた音楽に負けじ劣らじ最高にクールなので紹介したいと思います。 keijiroさんのサイト「Radium Software」tumblrというのもクールです。 keijiroさんがサイトで公開しているい
![Denkitribe(keijiro)さんのProcessingのスケッチが最高にクールなので紹介したい！ - karaage. [からあげ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/e11452f8d9834875a178461bc9bd112d47a8f518/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkaraage%2F20161214%2F20161214000416.gif)
Processing / p5.js で穴あき図形を描く beginContour() : だらっと学習帳
Processing / p5.js には beginContour() という関数が用意されています。 beginContour() \ Language (API) \ Processing 2+ beginContour() - p5.js | reference これは自由な形の「穴あき図形」を描くためのものです。 前々から「こんな関数あればいいのにな」と思っていたらすでに実装されていたなんて… 使用例 beginContour() のわかりやすい例として、以下のようなスケッチを作ってみました。 Coloring star - jsdo.it 塗り絵のような感じで、マウスで赤い円を動かして色を塗ることができます。 灰色の線で囲まれた白い領域は塗りつぶすことができませんが、 その領域の中央にある星の中は塗りつぶすことができます。 これは白い四角の中に星の形の穴をあけたためです。 もう
Processing 3でGIFアニメを作って保存する方法 - Qiita
最近個人的にProcessingにハマってます。面白いですよね、ジェネラティブ・アート。 作ったスケッチはやっぱりGIFアニメで保存して、サイトなどに載せたいですよね。スケッチをGIFアニメにできる「gifAnimation」というライブラリがあります。Processing 2以下までにしか対応してないと思ってたら、サラッとProcessing 3以上対応ver.がありました。 ダウンロードとインストール extrapixel/gif-animation at 3.0 3.0ブランチにて「Download ZIP」からファイル一式をダウンロードします Zipを解凍して、gifAnimationフォルダを、~/Documents/Processing/libraries/にコピーします 完了 GIFアニメの作成方法 // gifAnimationライブラリを読み込む import gifAn
Processing Library TemplateでProcessinglueを更新
インスタレーションやデジタルサイネージ等のように、大型ディスプレイや空間的に配置した複数のディスプレイでインタラクティブなシステムを動かすシミュレーションができるよう、3Dの仮想空間の中でProcessingを表示できる仮想ディスプレイとその仮想空間を撮影する仮想カメラを実装してきました。 その発端とも言えるCityCompilerは仮想空間はjMonkeyEngineを使いましたが、3D仮想空間もProcessingにしたのがProcessinglueです。 [CityCompiler Examples on Vimeo] 以前からソースコードはgithubで公開していたのですが、Processing2.xではデバッグがしづらくいつもEclipseでProcessingを使っていたこともあり、Eclipseで使うプロジェクトとして公開していました。 Processingがヴァージョンアッ
three.jsでジェネラティブアートっぽいことするのに必要な知識 - Processing中毒者の嘔吐物
タイトルの通り。 去年末くらいからWebGLというかthree.jsの勉強始めて、ある程度複雑な作品が作れるようになった。現在7つほどhttp://p5aholic.me/で作品を公開している。 点と線が繋がってごにょごにょするやつとか、近い点で面作ってごにょごにょするやつとか、そういうのをthree.jsで作るにはどんな知識が必要かというのを書いておく。本当はthree.jsの入門サイト作って体系的に解説したいところだけど、入門サイトはP5 Code Schoolで手一杯です。入門サイト運営するのくっそ面倒なんですわ。 大前提 JavaScriptはオブジェクトとか含めてしっかり理解していること。 three.jsの基礎知識 当たり前だけど、three.jsの基礎は押さえてないといけない。僕はLearning Three.js読んだ。英語だけどすごい読みやすいのでオススメ。 Learni
全自動水玉コラ生成マシーン - onk.ninja
全自動水玉コラ生成マシーン 聖夜なので表題のものを作った。 https://github.com/onk/auto_circle_collage processing で書いたアプリだけど、この記事の内容はほぼ OpenCV の話です。 仕組み 水着を自動認識して「隠す」とマーク 顔を自動認識して「見せる」とマーク マークに沿って円充填 水着領域の自動認識 最初のアプローチ OpenCV を使って肌色認識 選択領域を膨張 -> 収縮させる 肌色との差分を取れば水着領域が完成 肌色認識 先人が大量に居た。RGB 色空間ではなく HSV 色空間を使うというのがコツなようだ。 HSV色空間 - Wikipedia HSV 色空間なら影になっている部分も抽出できる。 今回は Hue: 7..15 を肌色として定義した。 PImage detectHada() { // 作業用に hue で gra
p5/D3 Cookbook
The p5 D3 Cookbook is a repository of documented examples for integrating the features of D3.js into the p5.js library. D3.js offers a wealth of tools for manipulating data and connecting data to visual representations. p5.js, whose goal is to make coding accessible for artists, designers, educators, and beginners, provides a environment where users can sketch their ideas in code. Together, these
球面上にランダムで置いたプロットをなるべく分散させたい - Qiita
(2015/07/15 9:30 追記) 結論から言うと、球面上に一様分布する関数を使うことで分散できたので、最終的なコードも含めていちばん最後に追記しました。 最近Processingで遊んでいて、「3D空間に三角関数を使ったプロットをいっぱい置いて球面を作る」というコードを書いていたんだけど、一部にプロットが集まってきてしまうのが気になっていた（ちょっとわかりにくいけど、下の画像でいうと中心左寄りの部分）。 そこで、乱数の生成処理を工夫して、ある程度ランダムでプロットを置きつつも一部に集中してしまうのを回避しようといろいろ試してみたので、その内容をメモる。 （途中からそれって乱数なの？みたいな気分になってきたけど、考えがまとまらなくなりそうだったので気にしていません……。） 元々のコードはこんな感じ。このコード自体はこのサイトを参考にして作った。 private static fina
cv-examples
A collection of computer vision examples for p5.js by @kcimc. Including jsfeat, clmtrackr, js-objectdetect, JSARToolkit, oflow, and tracking.js. Download from GitHub. Low level (analyzes single pixels): Empty Average Brightness Thresholding Brightest Point Color Detection Background Subtraction Frame Difference Medium Level (analyzes patches of pixels): Motion History Point Tracking Optical Flow E
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tyler Hobbs | Generative Art
はじめようレイトレーシング
GitHub - shiffman/Neural-Network-p5: Deprecated! See:
GitHub - raffaelepojer/TSP_GeneticAlgorithm: Solve the tsp problem using genetic algorithm with different techniques.
NOC-S17-2-Intelligence-Learning/README.md at master · shiffman/NOC-S17-2-Intelligence-Learning · GitHub
Tyler Wiseさんのツイート: "https://t.co/vO2r2a43OI"
psynavi/Animacy02 at master · kohske/psynavi