Processing Tips & HowTo

周期的パーリンノイズ

この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨ パーリンノイズを使っていて、始点と終点の値を揃えたいなという場面があります。例えば歪な円を描きたいとき、単純に半径にパーリンノイズを施しても大体始点と終点がこんな風にずれてしまいます。始点と終点で noise() パラメータの値を合わせればいいのなら noise(sin(0.0 〜 TWO_PI)) などとすることで実現できます。しかし、これだと周期的にパラメータの値が同じ

100

3D の球面を模様で彩るには？

今回は Processing で球面上に模様を描いてみます。この記事を書こうと思ったきっかけは Rui ChenーUIDesigner（@kimforever2008）さんのこのツイートです。アジサイの花びらの模様がとっても綺麗ですね！ツイートの中で『球体できないですかね』とおっしゃってます。これはいいお題が出ました！この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨ 球面を描くにはまず、今回 2D ではなく 3D での

100

作品の「のっぺり」を改善：GenerateMe さんの Smooth rendering

小さな点を多数重ねてこんなのを描画することがあります。でも、なんか真ん中が白飛びしちゃってたり、細かい濃淡がうまく出てない気がするんです。こっちはもっと極端で、濃淡も何も無くのっぺりしちゃってます。なんとかならないかなぁ〜。と、そんな悩みに効くと評判の GenerateMe さんの Smooth rendering を試してみました。この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨ blendMode(SCREEN)

100

Processing で簡単モーフィング

CG と言えばモーフィング！ Processing でもモーフィング出来るはず！やってみましょう。 Wikipedia によるとモーフィングとは、「ある物体から別の物体へと自然に変形する映像をみせる。これはオーバーラップを使った映像のすり替えとは異なり、変形していく間の映像をコンピュータによって補完して作成する。」なにやら難しそうですが、ある条件であれば簡単に出来るんです。この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨

100

楽しいよ！ Processing でイメージプロセッシング

Adobe Photoshop や Gimp で、画像を油絵風にするフィルターとかありますよね？「画像処理」「写真加工」「イメージプロセッシング」、呼び名はいろいろありますが、ああいうことを Processing を使ってやってみましょう。この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨ 画像の読み込みと情報の取得まずは、画像を読みこんで書き出す一連の処理を行うコードを見ちゃいましょう。話はそれから。 // Process

100

Twitter 無限ループアニメーションの作り方

Twitter にアップされた無限ループ動画、ついつい見ちゃいますよね。無限ループ動画といえば GIF 形式の動画が有名ですが、Twitter の場合 GIF ループ動画でなくともループさせることができます。今回は GIF ループを使わない方法でやってみましょう。どうやってループさせる？Twitter の FAQ に『Twitterに投稿された6.5秒以下の動画はすべて自動的にループ再生されます』とあります。つまり、何も考えずに 6.5秒以下の動画を作ってアップ

グローバル変数を使わずにアニメーション：Processing Tips

グローバル変数はバグの元、明日の自分に優しくない。できることなら使わずに済ませたい。でも、Processing でアニメーションを作りたいとき、どうしましょう？ Processing でアニメーションする場合の定石Processing でアニメーションさせる場合、よくある構成はこんな感じです。 float グローバル変数; setup() { グローバル変数 = random(100); } draw() { グローバル変数の値によって描画するロジック

センス不要！色使いのコツ：Processing Tips

色使いのキレイなジェネレーティブアートって素敵ですよね。思わず見とれちゃいます。私は作品作りするときに、どういう色を使ったら良いのか正直さっぱりわかりません。いわゆるセンスが無いってやつです。こういう「さっぱりわからない時」は理論に頼ります。 HSB を使えば大丈夫？Processing で作品作りをする際、RGB より HSB モードの方が使いやすいというお話を以前いたしました。 HSB を使えば角度＝色なので、角度を少し変えれば自然で微妙な色の変化を得られま

Processing でのデバッグ。バグが無いことに意味なんてあるのかな？

ポロロン♪ というわけで、みなさん楽しくデバッグしていますか？このノートではプログラミング的なデバッグではなく、クリエイティブコーディング的に「正しく動く」とはどういうことかを考えてみます。 println() や Processing 3.0 系から標準装備されたデバッガを使ってのデバッグ手法は解説いたしません。プログラミング的なデバッグについてはこちらのノートをご覧ください。クリエイティブコーディング（Creative coding）において「正しく動く」と

Processing でのデバッグ。標準デバッガの使い方

プログラミングにデバッグは付きもの。みなさんは Processing でのデバッグどうされてますか？変数値や条件分岐のちょっとした確認なら println() を入れるのも手軽にできて有効な方法です。いまあるコードに手を入れたくないなという場合は Processing 3.0 系から標準装備されたデバッガを使うのもいいですね。このノートでは、Processing 3.0 系の標準デバッガの使い方の簡単な説明をいたします。デバッガとは？そもそもデバッガとは、以下

Processing でアニメーション・動画を作成する簡単な手順：Processing How To

Processing をやり始めると、一度やってみたくなるのがアニメーション・動画の作成。自分の作成した絵を動かしてみたい！ですよね？このノートでは、Processing を使ってパラパラ漫画方式でアニメーション・動画を作成する手順を解説いたします。流れとしては以下です。 1.パラパラ漫画の全コマ（フレーム）の静止画を作成 2.作成したコマ（フレーム）を動画に変換パラパラ漫画を作ったことのある方ならお分かりかと思いますが、対象を少しずつ動かした静止画を沢山作

#プログラミング