マガジンのカバー画像

Processing Tips & HowTo

27
Processing でのプログラミングに役立つ Tips やハウツーをご紹介。
運営しているクリエイター

#p5js

random は初心者殺し…

「random() には気をつけろ…」電話の向こうで男の声が言った。 知らない番号からの電話には出ないことにしている僕がその電話を取ったのは、スマホに浮かんだ番号に興味を惹かれたからだった。 それはフィボナッチ数列だった。 「えっと、何…」戸惑う僕に構うことなく男は再び言った。 「random() には気をつけるんだ」 「random() って Processing とかの?」 「Processing でも p5.js でも何でもだ。やつは…初心者殺しだ」 setup(

Processing/p5.js の noise() で遊ぼう! 後編

使いこなせれば Processing/p5.js での作品作りがぐっと面白くなる noise()。 今回、簡単な作例を交えながらこの noise() の特徴や使い方をご紹介しています。 前編では noise() の性質を解説しながら静止画を作っていきました。この後編では noise() を使ったアニメーションに挑戦します。 「ノイズ」にはいろいろな種類がありますが、ここでは Processing/p5.js の noise() 関数(パーリンノイズの Processing

¥100

Processing/p5.js の noise() で遊ぼう! 前編

クリエイティブ・コーディングでよく使われるノイズですが、とっつきにくいとか、いまいち使い方がよくわからないという声も聞かれるようです。 今回、簡単な作例を交えながら noise() の特徴や使い方をご紹介したいと思います。noise() をマスターすれば作品作りがグッと面白くなるかも! 「ノイズ」にはいろいろな種類がありますが、ここでは Processing/p5.js の noise() 関数(パーリンノイズの Processing/p5.js での実装)を取り上げます

¥100

画期的!ブログを基にした文字ベースでのオンラインインベント【作者と語ろう】

本イベント終了いたしました。たくさんの作例ありがとうございました。 Processing Community Japan さんご協力の下、ブログを基にした文字ベースでの双方向コミュニケーション企画【作者と語ろう】イベントを開催いたします。 オンラインイベントなのに声出し無し!顔出し無し! 今だからこそ逆に新しい、文字ベースコミュニケーションのオンラインイベント。 Processing / p5.js の質問をブログ作者にぶつけてみよう! 👊 どういう企画?1.まず、作者

白の上に白で描く?

白の背景に白で描いても見えませんよね?黒の背景に白で描いたら見えますね? 今回はそんな当たり前のことを使ったちょっとしたトリックを紹介します。 この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨ 白背景に白で描く?まずは、p5.js のコードで白の背景に黒い四角形を描いてみます。 const w = 640;const h = 480;function setup() { createCanvas(w, h); colorMode(

¥100

erase() はレイヤーと一緒に使わないとダメなんだと気付いた夏

p5.js の erase() を使用した作例を Twitter 等で見かけるのですが、その動作がよくわからなくて、自分の理解のためにこの記事を書いてみます。 まず p5.js のリファレンスにあるサンプルを見てみたんですけど、これがよくわかんないんですよね。 一番目のサンプルは白い丸描いてるだけじゃないの? 二番目は透明度を加味した三角形? 三番目は dom? なんで HTML 関係してくるの? う〜ん… どういうこと?😰 この記事は全文無料でお読みいただけます。も

¥100

#PCD2020 で使った、文字から何かを描画するテクニック

タイトル絵にあるような、Processing Community Day Tokyo 2020 関連ツイートで使った「文字を元に何かを描画する」テクニックを紹介します。 テクニックというよりも、力技、ベタな方法ですので読んでズッコケないでね。 このテクニックで何が出来るのかこのテクニックは一言で言うと「文字を構成する点の座標をいかに得るか」です。 点の座標が得られればそれを使って、 ・その点に色を付ける ・点のところを四角や円にする ・点を動かす などいろんなことが出来る