サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ニコニコ動画
p5aholic.hatenablog.com
タイトルの通り。 去年末くらいからWebGLというかthree.jsの勉強始めて、ある程度複雑な作品が作れるようになった。現在7つほどhttp://p5aholic.me/で作品を公開している。 点と線が繋がってごにょごにょするやつとか、近い点で面作ってごにょごにょするやつとか、そういうのをthree.jsで作るにはどんな知識が必要かというのを書いておく。本当はthree.jsの入門サイト作って体系的に解説したいところだけど、入門サイトはP5 Code Schoolで手一杯です。入門サイト運営するのくっそ面倒なんですわ。 大前提 JavaScriptはオブジェクトとか含めてしっかり理解していること。 three.jsの基礎知識 当たり前だけど、three.jsの基礎は押さえてないといけない。僕はLearning Three.js読んだ。英語だけどすごい読みやすいのでオススメ。 Learni
Processing Advent Calendar 2015 : ATNDの参加記事です。 この記事ではクラスの作り方やnoise()の使い方、球体の座標の計算方法などは解説していません。 クラスの使い方とnoise()の使い方はP5 Code Schoolで、球体の座標の計算方法はこのブログの記事で先に読んでおいてください。 P5 Code School:Chapter15「クラス基礎 Part1」 P5 Code School:Chapter12「乱数」 Processingで三角関数を使って球体を作る - Processing中毒者の嘔吐物 Processingで壁紙自作記事第4弾になります。 今回作るのはコチラ↓ 最初の2つの画像と後の2つの画像は違うスケッチで作られています。 まずは最初のスケッチの解説から。 ソースはコチラ↓ int numLines = 8; // Line
Processing Advent Calendar 2015 : ATNDの参加記事です。 長い間悩み続けていたProcessingでの発光表現にひとまず終止符が打たれたので記事にします。 終止符を打ってくれたのが以下の記事。qiita.com まじでありがたい。結局発光表現には画像を使うしかないんだけど、その画像をProcessingで作る方法と3D空間に配置する方法が書いてある。上の記事内にあるプログラムを解説しやすいように変更したものを掲載させていただきます。次のプログラムを実行してみてください。マウスの位置に発光する球体が描画されます。 PImage img; // 光る球体の画像 void setup() { size(500, 500, P2D); imageMode(CENTER); // 加算合成 blendMode(ADD); noCursor(); // 画像の生成
Twitterでなんかのお絵かきソフトにある対称定規という機能(よく知らない)を使った面白い動画を見かけた。 お花っぽいのを描いて、隙間を適当なモニョモニョで埋めるだけでなんかおてがるにエスニックな感じの模様になるから、やはり対称定規は便利すぎるんだ…なによりこの自動生成感が楽しくて pic.twitter.com/FqJAMdzviy— ねぎ (@negi_mugiya) 2015, 10月 17 これなら簡単に作れるだろうと思ってProcessingでプログラムを書くことわずか5分、作れたので動画うpしてツイートしたら結構反応あってうれしい限り。話題の対称定規をProcessingで5分で作った #processing pic.twitter.com/jt9ssafETM— Keita@three.js面白すぎる (@P5Aholic) 2015, 10月 17 んでちょこっと解説書い
壁紙自作記事第3弾です。 今回作るのはこちら↓ 見ての通り、Processingユーザーなら一度は見たことのある再帰関数で描く木を使いました。 再帰関数の木についてはhttps://www.processing.org/examples/tree.htmlで確認しておいてください。 描画処理は1回目2回目の壁紙記事と同じなので前の記事を読んでおいてください。 Processingユーザーなら壁紙自作しようぜ? #1 - Processing中毒者の嘔吐物 ソースコードはこちら↓ (注意:画像が画面に映されるまでに結構時間かかります。僕のPCでは20秒~30秒かかりました。) float trunkLength = 260; // 最初の幹の長さ float trunkThickness = 70; // 最初の幹の太さ int maxPoints = 50; // 最大の点の数 int l
ということで、ProcessingでPCやスマホに使える壁紙制作していきます。 今回作るのはこんな感じの壁紙↓ 美しい 1000個の点を球体上にランダムに配置して、全ての点に対して他の全ての点との距離を計算し一定距離内にある点同士で多角形を作るという処理をしています。球体の作成法については Processingで三角関数を使って球体を作る - Processing中毒者の嘔吐物を参照。 画像一枚目のコードがこちら↓ int numPoints = 1000; // 点の数 int lengthLimit = 80; // 距離制限 int hueColor; // hueの値 color bgColor; // 背景色 Point[] points; boolean save = false; void setup(){ size(displayWidth, displayHeight,
ジェネラティブ・アートを読まれた方はご存知と思いますが、本の中に三角関数で球体を作るという内容があります。ですがなぜその三角関数の数式で球体が表現できるのか全く解説されていません。多分面倒くさかったんでしょう。ということで代わりに解説していこうと思います。 [普及版]ジェネラティブ・アート―Processingによる実践ガイド 作者: マット・ピアソン,Matt Pearson,久保田晃弘,沖啓介出版社/メーカー: ビー・エヌ・エヌ新社発売日: 2014/11/21メディア: 単行本(ソフトカバー)この商品を含むブログ (1件) を見る わかりやすいように、まずはジェネラティブ・アートに載ってるプログラムに変更を加えたものを解説していきます。 Step 1 / とりあえず一個の円を描く とりあえず、3D空間に1個の円を表示するプログラムが以下です。 void setup(){ size(9
Processingでは、blendMode()メソッドによって色の合成の仕方を変えることが出来ます。デフォルトではblendMode(BLEND)になっていて、図形が重なると、後から描画された図形が先に描画された図形を完全に塗りつぶします(透明度を指定している場合は別ですが)。blendMode(ADD)とすると、加算合成モードになります。加算合成モードでは、図形が重なると重なった所はより明るく表示されます。これを使うとちょっとした発光表現ができたりします。サンプルがこちら↓ /* 図形の明度を簡単にコントロールするために HSBモードにしておくと良いかも 加算合成モードにして 図形の重なりが多いところは明るくなるようにする 背景の明るさも加算されてしまうから背景は暗く */ void setup(){ size(960, 540, P2D); // HSBカラーモード colorMod
2年前 P5歴は1年だけれども、P5に出会ったのは2年前のこと。大学一回生の春学期のコンピュータ演習という授業で担当の教授に教えてもらった。コンピュータ演習の授業は3クラスほどに分かれていて、担当の教授によって授業の内容が結構バラバラだったりする。Processingを教えていたのは僕の担当の教授だけだったようで、今思えば運が良かった。授業で何をやったかというと、基礎の部分をザッと説明されただけで、「2週間後までに何か動くスケッチを作ってこい。発表してもらう」だった。僕はプログラミングに興味があったので情報科学科に入ったけど、入った時点ではC言語の超基礎的内容くらいしか勉強したことは無かった。んで、2週間では大したものが作れなくて、教授からも「うん、標準的」と言われる始末。他の生徒の中にはゲームやらを作ってる人もいて「すげぇぇ」とか思ってた。 1年前 コンピュータ演習でProcessing
このページを最初にブックマークしてみませんか?
『Processing中毒者の嘔吐物』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く