Processing中毒者の嘔吐物

ProcessingやらopenFrameworksやら色んなプログラミングについて吐きます

three.jsでジェネラティブアートっぽいことするのに必要な知識

タイトルの通り。去年末くらいからWebGLというかthree.jsの勉強始めて、ある程度複雑な作品が作れるようになった。現在7つほどhttp://p5aholic.me/で作品を公開している。点と線が繋がってごにょごにょするやつとか、近い点で面作ってごにょごにょするやつと…

Processingの文字で遊ぶ

Processing Advent Calendar 2015 : ATNDの参加記事です。昨日に続き今日も僕が担当します。昨日はちょっと重たい内容だったので今回は軽めにサクッと、ちょっと前に書いたスケッチ晒します。 これ↓を真似て作りました。 codedoodl.es ソースはこちら。 Lett…

Processingで発光表現

Processing Advent Calendar 2015 : ATNDの参加記事です。長い間悩み続けていたProcessingでの発光表現にひとまず終止符が打たれたので記事にします。 終止符を打ってくれたのが以下の記事。qiita.com まじでありがたい。結局発光表現には画像を使うしかない…

Processingユーザーなら壁紙自作しようぜ? #4

Processing Advent Calendar 2015 : ATNDの参加記事です。この記事ではクラスの作り方やnoise()の使い方、球体の座標の計算方法などは解説していません。 クラスの使い方とnoise()の使い方はP5 Code Schoolで、球体の座標の計算方法はこのブログの記事で先に…

Processingで対称定規プログラム

Twitterでなんかのお絵かきソフトにある対称定規という機能(よく知らない)を使った面白い動画を見かけた。お花っぽいのを描いて、隙間を適当なモニョモニョで埋めるだけでなんかおてがるにエスニックな感じの模様になるから、やはり対称定規は便利すぎるんだ…

P5入門サイトの進捗について

9月末に公開予定だったP5入門サイトはMGS5の発売に起因する深刻な進捗不良に見舞われています。いや、ちょくちょく作ってはいるんですよ。「変数とは何か?」から「オブジェクト指向基礎:クラスの作り方」とかまでの解説記事は作りました。 第1次公開する…

Processing入門サイト制作中だったりする

タイトルの通り。 Webのバイトとかしたいなーと思ってて、HTML CSS JavaScriptあたりの技術を身に着けたかったところだし、前々から入門サイトは作りたかったので作ることにした。 進捗はこんな感じ。 一応プログラミング未経験者も対象にしてるから変数とか…

Processingユーザーなら壁紙自作しようぜ? #3

壁紙自作記事第3弾です。 今回作るのはこちら↓ 見ての通り、Processingユーザーなら一度は見たことのある再帰関数で描く木を使いました。 再帰関数の木についてはhttps://www.processing.org/examples/tree.htmlで確認しておいてください。 描画処理は1回…

Processingユーザーなら壁紙自作しようぜ? #2

壁紙自作記事第2弾です。 今回作るのはこちら↓ ふつくしぃ・・・ということで、解説します。以下の記事を読んでおいてください。 Processingで三角関数を使って球体を作る - Processing中毒者の嘔吐物 Processingユーザーなら壁紙自作しようぜ? #1 - Proce…

Processingユーザーなら壁紙自作しようぜ? #1

ということで、ProcessingでPCやスマホに使える壁紙制作していきます。 今回作るのはこんな感じの壁紙↓ 美しい1000個の点を球体上にランダムに配置して、全ての点に対して他の全ての点との距離を計算し一定距離内にある点同士で多角形を作るという処理をして…

Processing記事一覧

作ってみた Processingで対称定規プログラム 解説 Processingで三角関数を使って球体を作る Processingの加算合成モードを使う Processingで発光表現 壁紙 Processingユーザーなら壁紙自作しようぜ? #1 Processingユーザーなら壁紙自作しようぜ? #2 Proces…

Processingで三角関数を使って球体を作る

ジェネラティブ・アートを読まれた方はご存知と思いますが、本の中に三角関数で球体を作るという内容があります。ですがなぜその三角関数の数式で球体が表現できるのか全く解説されていません。多分面倒くさかったんでしょう。ということで代わりに解説して…

Processingの加算合成モードを使う

Processingでは、blendMode()メソッドによって色の合成の仕方を変えることが出来ます。デフォルトではblendMode(BLEND)になっていて、図形が重なると、後から描画された図形が先に描画された図形を完全に塗りつぶします(透明度を指定している場合は別ですが…

ProcessingでLeap Motion初挑戦してみた

ずっと気になってたLeap Motionをついに買いました。導入からProcessingでの動作テストまで紹介したいと思います。Leap Motionの本体はAmazonで買いました。【国内正規代理店品】 Leap Motion 小型モーションコントローラー 3Dモーション キャプチャー シス…

Processing歴1年になったのでこの1年間を振り返ってみた

2年前 P5歴は1年だけれども、P5に出会ったのは2年前のこと。大学一回生の春学期のコンピュータ演習という授業で担当の教授に教えてもらった。コンピュータ演習の授業は3クラスほどに分かれていて、担当の教授によって授業の内容が結構バラバラだったりす…

p5.jsでフルスクリーンのcanvasを作ったときのトラブルと解決

GSwCCのトップページで動くフルスクリーンのp5.jsを最初に作ったときのこと。 function setup(){ createCanvas(windowWidth, windowHeight); } として、画面いっぱいちょうどのサイズを指定しているはずなのに、縦横ともにスクロールバーが出てしまっていま…

p5.jsでcanvasの位置を変える方法

以下のようにhtmlを書いて実行すると、"Processing"という文字の下にcanvas画面が出来上がります。 [index.html] <html> <head> <style> body {padding: 0; margin: 0;} </style> <script src="p5.min.js"></script> <script src="MySketch.js"></script> </head> <body> <p>Processing</p> </body> </html> [MySketch.js] function setup(){ c…

P5Aholicがはてなブログを始めました

P5Aholicがはてなブログを始めました