シェア
「random() には気をつけろ…」電話の向こうで男の声が言った。 知らない番号からの電話には出ないことにしている僕がその電話を取ったのは、スマホに浮かんだ番号に興味を惹かれたからだった。 それはフィボナッチ数列だった。 「えっと、何…」戸惑う僕に構うことなく男は再び言った。 「random() には気をつけるんだ」 「random() って Processing とかの？」 「Processing でも p5.js でも何でもだ。やつは…初心者殺しだ」 setup(
使いこなせれば Processing/p5.js での作品作りがぐっと面白くなる noise()。 今回、簡単な作例を交えながらこの noise() の特徴や使い方をご紹介しています。 前編では noise() の性質を解説しながら静止画を作っていきました。この後編では noise() を使ったアニメーションに挑戦します。 「ノイズ」にはいろいろな種類がありますが、ここでは Processing/p5.js の noise() 関数（パーリンノイズの Processing
クリエイティブ・コーディングでよく使われるノイズですが、とっつきにくいとか、いまいち使い方がよくわからないという声も聞かれるようです。 今回、簡単な作例を交えながら noise() の特徴や使い方をご紹介したいと思います。noise() をマスターすれば作品作りがグッと面白くなるかも！ 「ノイズ」にはいろいろな種類がありますが、ここでは Processing/p5.js の noise() 関数（パーリンノイズの Processing/p5.js での実装）を取り上げます
本イベント終了いたしました。たくさんの作例ありがとうございました。 Processing Community Japan さんご協力の下、ブログを基にした文字ベースでの双方向コミュニケーション企画【作者と語ろう】イベントを開催いたします。 オンラインイベントなのに声出し無し！顔出し無し！ 今だからこそ逆に新しい、文字ベースコミュニケーションのオンラインイベント。 Processing / p5.js の質問をブログ作者にぶつけてみよう！ 👊 どういう企画？１．まず、作者
openFrameworks 等と比較して描画の遅い Processing を使って、音に反応して動くアニメーションを作る方法の第 2段です。 前回は音源を加工することで 24fps 程度のアニメーションを作ることが出来ました。 今回はさらに描画に時間がかかる絵によるアニメーションを実現させます！ 我流で思いついた方法であって、「これが最適解だ！」というわけではありません。他にいい方法がありましたらお教えいただけると嬉しいです。 この記事は全文無料でお読みいただけます。
openFrameworks 等と比較して描画の遅い Processing を使って、音に反応して動くアニメーションを作る方法を考えてみました。 リアルタイムで再生している音源に反応させる方法ではなく、音源ファイルを読み込んでバッチ処理でアニメーションを作成する方法です。 我流で思いついたある一つの方法であって、「これが最適解だ！」というわけではありません。 この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨ 音に反応して動くアニ
個別のアイテムがヒラヒラしながら中央に向けて無限に吸い込まれていくこの動画、一番外側のヒラヒラは 120秒ぐらいで吸い込まれて消えていきます。 でも、これ全体で 6秒の動画なんです。結構簡単な仕掛けでこのような無限運動を作ることが出来ます。 この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨ 短い動画で無限運動に見せる仕掛け先程の動画は Twitter 上で繰返し再生（ループ再生）されます。 Twitter のヘルプによると『60秒
白の背景に白で描いても見えませんよね？黒の背景に白で描いたら見えますね？ 今回はそんな当たり前のことを使ったちょっとしたトリックを紹介します。 この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨ 白背景に白で描く？まずは、p5.js のコードで白の背景に黒い四角形を描いてみます。 const w = 640;const h = 480;function setup() { createCanvas(w, h); colorMode(
p5.js の erase() を使用した作例を Twitter 等で見かけるのですが、その動作がよくわからなくて、自分の理解のためにこの記事を書いてみます。 まず p5.js のリファレンスにあるサンプルを見てみたんですけど、これがよくわかんないんですよね。 一番目のサンプルは白い丸描いてるだけじゃないの？ 二番目は透明度を加味した三角形？ 三番目は dom？ なんで HTML 関係してくるの？ う〜ん… どういうこと？😰 この記事は全文無料でお読みいただけます。も
この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨ パーリンノイズを使っていて、始点と終点の値を揃えたいなという場面があります。 例えば歪な円を描きたいとき、単純に半径にパーリンノイズを施しても大体始点と終点がこんな風にずれてしまいます。 始点と終点で noise() パラメータの値を合わせればいいのなら noise(sin(0.0 〜 TWO_PI)) などとすることで実現できます。 しかし、これだと周期的にパラメータの値が同じ
今回は Processing で球面上に模様を描いてみます。 この記事を書こうと思ったきっかけは Rui ChenーUIDesigner（@kimforever2008）さんのこのツイートです。 アジサイの花びらの模様がとっても綺麗ですね！ ツイートの中で『球体できないですかね』とおっしゃってます。これはいいお題が出ました！ この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨ 球面を描くにはまず、今回 2D ではなく 3D での
小さな点を多数重ねてこんなのを描画することがあります。 でも、なんか真ん中が白飛びしちゃってたり、細かい濃淡がうまく出てない気がするんです。 こっちはもっと極端で、濃淡も何も無くのっぺりしちゃってます。 なんとかならないかなぁ〜。 と、そんな悩みに効くと評判の GenerateMe さんの Smooth rendering を試してみました。 この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨ blendMode(SCREEN)
CG と言えばモーフィング！ Processing でもモーフィング出来るはず！ やってみましょう。 Wikipedia によるとモーフィングとは、 「ある物体から別の物体へと自然に変形する映像をみせる。これはオーバーラップを使った映像のすり替えとは異なり、変形していく間の映像をコンピュータによって補完して作成する。」 なにやら難しそうですが、ある条件であれば簡単に出来るんです。 この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨
Adobe Photoshop や Gimp で、画像を油絵風にするフィルターとかありますよね？ 「画像処理」「写真加工」「イメージプロセッシング」、呼び名はいろいろありますが、ああいうことを Processing を使ってやってみましょう。 この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨ 画像の読み込みと情報の取得まずは、画像を読みこんで書き出す一連の処理を行うコードを見ちゃいましょう。 話はそれから。 // Process
